by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=7539
本文可全文转载，但需要保留原作者和出处。

一、这两天做了个可传图可写台词GIF生成器

这两天晚上在家做了个可以自己传图，可以自己写台词的GIF生成器。

您可以狠狠地点击这里：Gif表情自定义字幕在线生成器

可以用提供的模板生成GIF表情，例如，我们选择“今天的风甚为喧闹”，我们可以自己修改台词，修改GIF这一帧延迟时间。

流量开销伤不起，模板图片都是自己主机做图床，舍不得提供过多图片序列，因此，生成GIF的素材掉帧有些严重，见谅见谅，感受精髓，感受精髓。

然后，生成GIF效果就是下面图这样：

如果嫌弃提供的模板太简陋，可以自己上传序列图片DIY，例如使用上一篇文章中用到的的图片序列素材：

然后填写台词：“给你一个飞吻”“么啊”，然后生成，就有下面质量不错的GIF效果了（点击播放200多K）：

重点是这个工具纯前端生成的

表情生成器工具很多，简单的如静态图生成器，静态图上面台词可以修改；复杂点的动态GIF表情生成器，例如可能有人已经用过的“表情锅”：https://sorry.xuty.tk/sorry/

目前已经有好几十个模板了，访问量应该可以，因为我看到guang gao都出来了。

但是小工具是后端图片服务主导实现的，于是就有这样问题：

1. 服务器开销不小，压力比较大；
2. 只能用对方提供的模板生成gif表情，不能使用自己的自定义素材，例如无法实现一个放飞自我的“飞吻”GIF表情；

实际上，纯前端就能搞定GIF生成，资源开销更小，速度更快，更加灵活！

二、如何JS纯前端web生成GIF图片呢？

本GIF表情生成器核心技术源自这个项目：https://github.com/jnordberg/gif.js

借助Web Workers, File API和类型数组在浏览器端进行GIF encode，从而生成GIF图片。

语法相当简单，下面代码是官方示例，我简单翻译下：

var gif = new GIF({
  workers: 2,
  quality: 10
});

// 添加图片元素
gif.addFrame(imageElement);

// 或者是canvas元素
gif.addFrame(canvasElement, {delay: 200});

// 或者从canvas的上下文复制像素信息
gif.addFrame(ctx, {copy: true});

gif.on('finished', function(blob) {
  // 这里的blob就是gif图片blod格式信息
  window.open(URL.createObjectURL(blob));
});

gif.render();

三、GIF生成器中的字幕台词是怎么加上去的呢？

GIF生成器中的字幕台词是怎么加上去的呢？答案是使用canvas绘制的。

canvas先使用drawImage()方法绘制底图，然后把输入框中的对话信息绘制在底图上就好了。

拿其中某一帧举例示意：

var gif = new GIF({
    width: width,
    height: height
});
// 画布元素
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
// 绘制图片
context.drawImage(img, 0, 0);
// 绘制文字
context.fillText(message, width / 2, height - 32);
// 作为帧插入GIF
gif.addFrame(context, {
    delay: delay,
   copy: true
});

四、本地上传GIF帧图片如何处理的？

本地上传素材图片和模板提供的类似，只是素材图片预览时候的src地址是base64地址。

无论是选择上传还是拖拽上传，都可以get到图片这个文件对象，假设变量名是file，则可以借助FileReader将图片文件转换成可预览模式：

var reader = new FileReader();
reader.onload = function(e) {
    // e.target.result就是图片的base64地址信息
    // 让img的src属性值为e.target.result图片即可呈现
}
reader.readAsDataURL(file);

接下来的代码逻辑就和模板图片的处理一模一样了。

五、结束语

1. 本工具UI组件由LuLu UI提供支持，LuLu UI —— 你问我有什么不同？只是更自由，更纯粹，和用户走得更近。
2. 欢迎反馈使用中遇到的问题，文章评论，或者微博私信都可以。
3. 本工具URL地址是：/sp/gif，特别的（special）gif，特别的爱给特别的你~我擦，我居然不自觉唱起来了~
4. 分享看到的一个关于帧和时间挺有意思的推文（日文翻译版）：

   

   按照上图的说法，每帧时间为0.02秒，也就是20毫秒每帧，接近显示器的绘制频率，哈哈哈。对于GIF标签图而言，不需要这么高的帧率，每帧84毫秒用户体验也是可以接受的，频率过高的GIF体积会很大，有的甚至达4~5M，对于web环境，是不太适合的。

以上为本文全部内容，感谢阅读！

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：http://www.zhangxinxu.com/wordpress/?p=7539

（本篇完）