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. Java中Date()类 日期转字符串、字符串转日期的问题（已解决）

    Java中Date()类 日期转字符串.字符串转日期的问题 今天在写东西的时候突然发现一个问题,就是先new 一个Date()然后将生成的值转为字符串, 然后再将转换后的字符串再次用new Date( ...

  2. keepalived+nginx 高可用集群

    一.什么是高可用?   nginx做负载均衡,能达到分发请求的目的,但是不能很好的避免单点故障. 1.nginx集群单点问题 分发器宕机怎么处理? 假如nginx服务器挂掉了,那么所有的服务也会跟着瘫 ...

  3. 函数进阶3 —— 生成器、yield from

    今天我们在进一步了解一下,生成器. ①: def func(): print('这是函数func') return '函数func' func() 结果是 这是函数func ②: def func1( ...

  4. easyui datagrid 本地json数据 实现删除

    html代码:<a href='javascript:void(0);' onclick='Delete(\""+ index +"\")' class= ...

  5. node.js-cancelled because Node.js is unresponsive

    今天初学node.js,但是在使用vs code 进行启动调试的时候出现了一个问题 这个报错,一开始我并不知道是什么意思.(而截至我写这个笔记我也还没了解清楚) 大概翻译出来的意思是说 “node.j ...

  6. Spark应用(app jar)发布到Hadoop集群的过程

    记录了Spark,Hadoop集群的开启,关闭,以及Spark应用提交到Hadoop集群的过程,通过web端监控运行状态. 1.绝对路径开启集群 (每次集群重启,默认配置的hadoop集群中tmp文件 ...

  7. 如何获得ImageView中的图像

    我们知道在Android中ImageView是一个用于显示图像的控件,比如在很多联系人方面的应用中,需要为联系人拍摄头像,并将得到的头像放在一个 ImageView对象中显示.通常,在没有为联系人拍摄 ...

  8. css 字体样式设置

    css字体样式(Font Style),属性 时间:2014-05-08 21:49 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响 68353 人   css字体样式(Font Style) ...

  9. Angular js 双向绑定时字符串的转换成 数字类型的问题

    问题: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <scrip ...

  10. docker 部署 nginx+php+mysql

    系统:centos7 使用root账户 开放80端口 firewall-cmd --zone=public --add-port=80/tcp --permanent 安装docker yum ins ...