GIF动态图⽚分解，多帧动态图分解成多张静态图⽚
体验地址
由于挂载在github page上，打开速度会慢⼀些，请耐⼼等待或⾃⾏解决git⽹速问题
背景
为什么要制作这么⼀款⼯具
最近在做⼀款表情包的产品，需要将⽂字⽣成到gif图⽚中，并可以控制⽂字显⽰的位置，并将不同的⽂字显⽰在不同的图⽚上，只需要提供坐标传给后端就可以了，但是我想直接⽣成图⽚出来，通过不断尝试，终于完成了此功能
分析
主要实现思路是
将gif动图经过gif库解析成gif实例
遍历获取gif实例的每⼀帧的canvas，转换成baseURL，再转⼀份file对象存放起来
将转换后的baseURL通过fabric展⽰到canvas界⾯上，并添加⽂字实现⽂字任意操作功能
将每⼀帧图⽚合成后⽣成新的gif图⽚
使⽤教程
⼯具从上往下⼀共分为3个区域
画布区
将分解的图⽚和添加的⽂字显⽰在画布中
选择区
1. 上传图⽚直接本电脑中选中⽂件上传
2. 填写链接输⼊框填写⼀个线上的gif图⽚地址，如果图⽚解析不出来，解决⽅法是下载图⽚出来，再使⽤上⽅上传，原因是图⽚不⽀持
跨域
3. 分段选项将gif解析出来的图⽚分成⼏个区域显⽰，⽀持2 3 4
4. 帧间隔预览或者⽣成的gif中每⼀帧图⽚的显⽰间隔时间，最⼩取值0.02，单位s
5. 图⽚⼤⼩⽣成图⽚的⼤⼩，默认300px，单位px
6. 预览图⽚仅供预览观看，默认宽300px，⾼⾃适应
7. ⽣成图⽚可以下载图⽚使⽤
属性操作区
每⼀个⽅格对应画布中每⼀个区域的⽂字属性
最后⼀个⽅格可以控制操作全部⽂字
注: ⽂字位置不要偏离对应的那张图⽚中，要不然会出现图⽚消失或显⽰不完整
属性详解
属性说明默认
帧数每⼀段区域图⽚数量⾃动计算，也可点击下⽅+ -号设置
左边距⽂字距离左边框距离0
上边距⽂字距离上边框距离0
备注
本⼈是在⾕歌浏览器调试开发的，没有考虑任何兼容问题，最好在⾕歌浏览器使⽤记住我
点击⽣成图⽚后，可以将⽣成图⽚下载出来，如需使⽤请注意版权问题，如出现版权纠纷，本库概不负责
如有其它问题请下⽅留⾔
特别感谢
GIF图⽚分帧
canvas操作
⽣成GIF图⽚
创作不易，如果对你有帮助，请移步给个星星 star  谢谢