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. 【代码笔记】XML深入学习：DTD约束与DTD语法(1)

    2015-12-27 文件名    student.xml <?xml version="1.0" encoding="GB2312" standalon ...

  2. angular怎么样注销事件

    angular怎么样注销事件 $scope.$on("$destroy", function() { //清除配置,不然scroll会重复请求 }) 在Controller中监听$ ...

  3. js贪食蛇

    <!DOCTYPE html><head><title>canvas贪食蛇</title><style>.canvas{    backgr ...

  4. 嵌入式开发 MCU

    From: http://www.infoq.com/cn/articles/intelligent-embedded-os-Internet-of-things-and-robots 嵌入式开发是一 ...

  5. c#中abstract、override、new、virtual、sealed使用和示例

    原文地址:http://blog.csdn.net/richerg85/article/details/7407544 abstract      修饰类名为抽象类,修饰方法为抽象方法.如果一个类为抽 ...

  6. mysql的安装和使用

    1.下载 数据库:mysql-3.23.53-win1 可视化工具:mysqlcc-0.9.4-win32 2.步骤: (1)解压mysql-3.23.53-win1(其他的也可以),按照步骤安装到你 ...

  7. dos基础+环境搭建基础理论

    dos基础 市面上两大操作系统 windows.*nix(unix.linux.mac.bsd(安全性比较高)) 后三种都属于unix的衍生版本 linux是为了兼容unix开发的,最后开放了源代码 ...

  8. 通过一个实际例子理解Kubernetes里pod的自动scale - 水平自动伸缩

    kubectl scale命令用于程序在负载加重或缩小时进行pod扩容或缩小,我们通过一些实际例子来观察scale命令到底能达到什么效果. 命令行创建一个deployment: kubectl run ...

  9. ubuntu git svn 缺少 subversion-perl

    在命令行中输入以下命令:sudo apt-get install subversion-tools等待安装成功即可.

  10. c++11之为什么C++11引入了std::ref？

    C++本身有引用(&),为什么C++11又引入了std::ref? 主要是考虑函数式编程(如std::bind)在使用时,是对参数直接拷贝,而不是引用.如下例子: #include <f ...