canvas 制作表情包

代码如下。

 <!DOCTYPE html>

 <html>

 <head>

   <title>表情制作</title>

   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

   <meta name="mobile-web-app-capable" content="yes">

   <meta name="apple-mobile-web-app-capable" content="yes">

   <style>

     #image-container {

       display: flex;

     }

   </style>

 </head>

 <body>

   <script>

   </script>

   <div>

     <input type="file" id="file" />

   </div>

   <div id="image-container">

     <canvas width="500" height="500"></canvas>

     <div>

       <span>Top Line:</span><br/>

       <input id="topLineText" type="text"><br/>

       <span>Bottom Line:</span><br/>

       <input id="bottomLineText" type="text"><br/>

       <button id="saveBtn">Save</button>

     </div>

   </div>

   <script>

     function textChangeListener (evt) {

       var id = evt.target.id;

       var text = evt.target.value;

       if (id == "topLineText") {

         window.topLineText = text;

       } else {

         window.bottomLineText = text;

       }

       redrawMeme(window.imageSrc, window.topLineText, window.bottomLineText);

     }

     function redrawMeme(image, topLine, bottomLine) {

       //

       var canvas = document.querySelector('canvas');

       var ctx = canvas.getContext("2d");

       if (image != null)

         ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

       //

       ctx.font = '30pt Impact';

       ctx.textAlign = 'center';

       ctx.strokeStyle = 'black';

       ctx.lineWidth = 3;

       ctx.fillStyle = 'white';

       if (topLine != null) {

         ctx.fillText(topLine, canvas.width / 2, 40);

         ctx.strokeText(topLine, canvas.width / 2, 40);

       }

       if (bottomLine != null) {

         ctx.fillText(bottomLine, canvas.width / 2, canvas.height - 20);

         ctx.strokeText(bottomLine, canvas.width / 2, canvas.height - 20);

       }

     }

     function saveFile() {

       window.open(document.querySelector('canvas').toDataURL());

     }

     function handleFileSelect(evt) {

       var canvasWidth = 500;

       var canvasHeight = 500;

       var file = evt.target.files[0];

       var reader = new FileReader();

       reader.onload = function(fileObject) {

         var data = fileObject.target.result;

         var image = new Image();

         image.onload = function() {

           window.imageSrc = this;

           redrawMeme(window.imageSrc, null, null);

         }

         image.src = data;

         console.log(fileObject.target.result);

       };

       reader.readAsDataURL(file)

     }

     window.topLineText = "";

     window.bottomLineText = "";

     var input1 = document.getElementById('topLineText');

     var input2 = document.getElementById('bottomLineText');

     input1.oninput = textChangeListener;

     input2.oninput = textChangeListener;

     document.getElementById('file').addEventListener('change', handleFileSelect, false);

     document.querySelector('button').addEventListener('click', saveFile, false);

   </script>

 </body>

 </html>

canvas 制作表情包的更多相关文章

  1. 巧用 SVG 滤镜还能制作表情包？

    本文将介绍一些使用 SVG feTurbulence 滤镜实现的一些有趣.大胆的的动效. 系列另外两篇: 有意思!强大的 SVG 滤镜 有意思!不规则边框的生成方案 背景 今天在群里面聊天,看到有人发 ...

  2. 【腾讯Bugly干货分享】舞动的表情包——浅析GIF格式图片的存储和压缩

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/v0pffOhjFWnVbU2lXjuEmw 导语 G ...

  3. 怎样用手机把视频变成GIF表情包？原来那么简单，网友：看完涨知识了

    现如今表情包几乎成了,我们手机聊天的必需品了.不过相比于普通表情包,大家更喜欢用GIF表情包,因为动图表情包不仅更加搞笑,而且能更形象的表达我们的情绪.比较有想法的朋友甚至想自己制作GIF表情包,但是 ...

  4. 如何制作微信动态表情包 GIF制作工具哪个好

    表情包已经成为我们生活聊天中必不可少的一部分,但是如何制作微信动态表情包呢?自己制作的表情包更加独有个性,今天小编带大家看一波原创表情包的制作方法吧! 使用工具:电脑 操作方法: 1.首先在手机上也是 ...

  5. python截取视频制作动态表情包+文字

    1:安装moviepy库 2:安装IPython库 代码如下: from moviepy.editor import * from IPython.display import Image def B ...

  6. 我用Python一键保存了半佛老师所有的骚气表情包

    本文首发于公众号「Python知识圈」,如需转载,请在公众号联系作者授权. 2019年发现两个有意思而且内容比较硬核的公众号.都是同一个人运营的,我们都叫他半佛老师,现实中的职业是风控,公众号内容涉及 ...

  7. 如何用AR Engine开发一个虚拟形象表情包？

    现如今,人们在网上聊天.发帖时越来越爱用表情包,表情包一方面是一种个性化的表达方式,另一方面更能传达出当下的心理活动,可以说在网络社交中表情包是一个不可或缺的存在.加上近年来元宇宙的兴起,3D虚拟形象 ...

  8. 制作CAB包

    制作CAB包 inf文件 INF是Device INFormation File的英文缩写,是Microsoft公司为硬件设备制造商发布其驱动程序推出的一种文件格式,INF文件中包含硬件设备的信息或脚 ...

  9. 用Canvas制作简单的画图工具

    今天用Canvas制作了一个画图工具,非常简单,功能也不是很多,主要有背景网格,画线,画圆,画矩形和画圆角矩形,也用到了canvas的一些基本知识,在这里一一列举. 1.线段的绘制: 如何绘制真正的1 ...

随机推荐

  1. scss-@mixin传参

    混合器一个很重要特性就是可以传递参数,可以根据不同场景来定制css代码的复用.极大提高了混合器的适用性,看如下scss代码实例: @mixin makeradius($radius) { border ...

  2. 集合之equals与hashCode方法

    一  equals equals方法是Object级的,默认对比两个对象的内存地址,很多类都重写了该方法,对比对象的实际内容,一般对比同一类对象相同属性的属性值是否相同. 二 hashCode 1.哈 ...

  3. Homebrew 的使用

    安装 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/ins ...

  4. android，getExternalStorageDirectory()和getExternalFilesDir()的区别

    转载地址:https://blog.csdn.net/nugongahou110/article/details/48154859 之前看到一位网友的吐槽:当我把手机连接到电脑上时,在SD卡根目录看到 ...

  5. 我的书单mybooklist

    首先自我介绍一下,我是一名程序员. 计算机的世界太浩瀚,而我太过渺小. 比计算机的世界更为广大的是,书籍的海洋.学海无涯. 无论是计算机的世界,还是其他类书的世界,人一辈子要看的书看也看不完. 于是我 ...

  6. keras 自定义 custom 函数

    转自: https://kexue.fm/archives/4493/,感谢分享! Keras是一个搭积木式的深度学习框架,用它可以很方便且直观地搭建一些常见的深度学习模型.在tensorflow出来 ...

  7. 如何开放 Azure 虚拟机 Ping 功能

    前言 文章<使用 PsPing & PaPing 进行 TCP 端口连通性测试>中提到,ICMP 协议的数据包无法通过 Azure 的防火墙和负载均衡器,所以不能直接使用 Ping ...

  8. Web系统常见安全漏洞及解决方案-SQL盲注

    关于web安全测试,目前主要有以下几种攻击方法: 1.XSS 2.SQL注入 3.跨目录访问 4.缓冲区溢出 5.cookies修改 6.Htth方法篡改(包括隐藏字段修改和参数修改) 7.CSRF ...

  9. MySQL代码备份

    package com.dus.utils; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io. ...

  10. MySQL 5.7 修改数据物理文件目录

    修改MySQL数据库物理文件存放位置,需要在MySQL配置文件中修改相关参数.安装MySQL5.7后,在MySQL安装目录下没有找到数据库物理文件,最后经过查找发现其在“C:\ProgramData\ ...