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. linux环境下 mysql数据库忘记密码 处理办法

    整个修改过程大概3-10分钟(看个人操作),这个时间内mysql出于不需要密码就能登陆的状态,请设法保证系统安全 不罗嗦直接上步骤 1.vi /etc/my.cnf 在[mysqld]下,添加一句:s ...

  2. qt中的lineEdit文本输入框的输入类型限制(三种验证类)

    qt的三种验证类: 1.输入int类型 QValidator *validator=new QIntValidator(100,999,this): QLineEdit *edit=new QLine ...

  3. Python数组使用

    python数组的使用 2010-07-28 17:17 1.Python的数组分三种类型: (1) list 普通的链表,初始化后可以通过特定方法动态增加元素. 定义方式:arr = [元素] (2 ...

  4. hadoop使用

    hadoop@ubuntu:~$ cd hadoop-2.0.5-alpha/ hadoop@ubuntu:~/hadoop-2.0.5-alpha$ ls hadoop@ubuntu:~/hadoo ...

  5. C# 调用 c++ 非托管dll时wchar类型参数的乱码处理

    [DllImport("user32.dll", CallingConvention = CallingConvention.WinApi)] public static exte ...

  6. Vim直接打开Tampermonkey网址的方法。

    根据tampermonkey利用@require调用本地脚本的方法,比如我电脑上保存了Tampermonkey脚本a.user.js和它调用的a.js, 想在Vim编辑这两个文件时,都能一键打开网页里 ...

  7. LeetCode Two Sum 解题思路(python)

    问题描述 给定一个整数数组, 返回两个数字的索引, 使两个数字相加为到特定值. 您可以假设每个输入都有一个解决方案, 并且您不能使用相同的元素两次. 方法 1: 蛮力 蛮力方法很简单.循环遍历每个元素 ...

  8. 第3次Scrum冲刺

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  9. Android Studio常用快捷键、Android Studio快捷键大全

    Android Studio 是谷歌基于IntelliJ IDEA开发的安卓开发工具,有点类似 Eclipse ADT,Android Studio 提供了集成的 Android 开发工具用于开发和调 ...

  10. datatable Left and right fixed columns

    $(document).ready(function() { var table = $('#example').DataTable( { scrollY: "300px", sc ...