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. cf1072D. Minimum path(BFS)

    题意 题目链接 给出一个\(n \times n\)的矩阵,允许修改\(k\)次,求一条从\((1, 1)\)到\((n, n)\)的路径.要求字典序最小 Sol 很显然的一个思路是对于每个点,预处理 ...

  2. ECMAscript 变量作用域

    使用var操作符声明的变量与未使用var操作符声明的变量区别 未使用var操作符声明 function test() { message='hi'; console.log(message); } c ...

  3. 有关在新版mac上 git 环境变量的配置问题

    前段时间买的新版 mpb ,各种环境什么都没有配置,想着在网上边搜边摸索着将各种开发工具逐步配置齐全,各种问题不断出现,不知道是不是新版的原因不兼容. 其中 git 的配置尤为奇怪.在git官网上直接 ...

  4. matlab练习程序（广度优先搜索BFS、深度优先搜索DFS）

    如此经典的算法竟一直没有单独的实现过,真是遗憾啊. 广度优先搜索在过去实现的二值图像连通区域标记和prim最小生成树算法时已经无意识的用到了,深度优先搜索倒是没用过. 这次单独的将两个算法实现出来,因 ...

  5. web.xml中不同版本的servlet头以及版本控制

    参考文章: http://www.cnblogs.com/beijingstruggle/p/5461146.html http://blog.csdn.net/z69183787/article/d ...

  6. Selenium2学习（八）-- 操作元素（键盘和鼠标事件）

    前言 在前面的几篇中重点介绍了一些元素的到位方法,到位到元素后,接下来就是需要操作元素了.本篇总结了web页面常用的一些操作元素方法,可以统称为行为事件 有些web界面的选项菜单需要鼠标悬停在某个元素 ...

  7. oracle_procedure

    define: 存储过程(Stored Procedure )是一组为了完成特定功能的SQL 语句 集,经编译后存储在数据库中.用户通过指定存储过程的名字并给出参数(如果该存储过程带有参数)来执行它. ...

  8. GitLab 数据自动备份

    gitlab自动备份 周期性计划任务: crontab -e * * * /opt/gitlab/bin/gitlab-rake gitlab:backup:create service crond ...

  9. 关于simotion建立同步/解除同步的问题

    关于simotion建立同步/解除同步的问题. 问题: [enable gearing][disable gearing][enable camming][disable camming]都是一个过程 ...

  10. 到底哪种类型的错误信息会阻止business transaction的保存

    当试图在CRM WebUI保存一个business transaction比如Opportunity时,可能会遇到各种各样的错误消息.有的错误消息会阻止Business transaction被sav ...