之前在Q群里里面看到群机器人有个生成撅人表情包的功能，如下图所示，当时就在想能不能自己用JS也实现个，但感觉自己这方面一片空白，一直就没弄，直到有次电脑打开了这个表情gif，发现一共就三帧动画，好像也不是很复杂的样子，于是乎就又有动力了。

记得在张鑫旭大佬博客看到过生成gif图的文章，搜了下是gif.js库，然后就是引用库，加上ai一顿乱套代码，屎山代码把功能实现了，就是用canvas画三个画布，然后gif.js合并canvas变成gif图。

因为canvas我不熟练，代码ai加上自己理解乱弄的很乱，后来想到html2canvas库，我就自己用html布局，然后用html2canvas把html布局变成canvas，最后再用gif.js合并。步骤多了但用html布局舒服多了，代码清晰自己也能看懂了。

问题

gif.js生成的透明背景图，会导致黑色部分也变透明，实际上他处理过程是把透明背景当成黑色，然后再统一把黑色变透明，导致的这个问题，可以用transparent设置个颜色，然后把它替换成透明而不是把黑色替换成透明，然后html2canvas也可以设置背景色，之前是设置成透明，现在就设置成和transparent参数一个颜色就行了，这个颜色最好不容易和图片本身冲突，避免倍替换成透明。

本以为这样就非常ok了，然后发现使用绿色，洋红等颜色后，生成的透明背景gif图中间不透明区域的边框有1px的带颜色的描边，经过一番研究觉得可能是透明png素材的边界处有半透明色导致和设置颜色混合的问题，进而导致这1px的颜色既不是设定的颜色，也不是半透明，然后自己对图片格式，色彩位数也不是很了解，不知道怎么改变好素材，我就把替换色换成了灰色解决，所以最终成品会干掉某个色值的灰色。

还有个问题，就是有时候生成的gif的第一帧背景不会被替换，出现的概率不是很大，可能也和图片有关系，某些图就100%触发，换了个transparent值又好了，但是我觉得和transparent关系又不大，挺迷惑的。

成果

做完一个后成就感拉满，然后又做了两个别的，这两个素材中的手就是我的左右手哈哈哈！

泽泽撅我：https://91ntr.cn/tool/jue.php
泽泽 RUA 我 (泽泽左手)：https://91ntr.cn/tool/rua.php
泽泽捏我 (泽泽右手)：https://91ntr.cn/tool/nie.php

关于效果预览

gif的本质就是多张图片以一定时间切换，这样看起来就是动起来了，而我这里的布局是用html写的，也就是说我只要让多个div切换显示就可以实现实时预览了，利用定时器设置好时间间隔，不断的切换div显示与隐藏，模拟出来了gif的感觉了，非常完美😄