GIF动态图片分解,多帧动态图分解成多张静态图片

体验地址

• 工具地址 由于挂载在github page上，打开速度会慢一些，请耐心等待或自行解决git网速问题

背景

为什么要制作这么一款工具

最近在做一款表情包的产品，需要将文字生成到gif图片中，并可以控制文字显示的位置，并将不同的文字显示在不同的图片上，只需要提供坐标传给后端就可以了，但是我想直接生成图片出来，通过不断尝试，终于完成了此功能

分析

主要实现思路是

• 将gif动图经过gif库解析成gif实例
• 遍历获取gif实例的每一帧的canvas，转换成baseURL，再转一份file对象存放起来
• 将转换后的baseURL通过fabric展示到canvas界面上，并添加文字实现文字任意操作功能
• 将每一帧图片合成后生成新的gif图片

使用教程

工具从上往下一共分为3个区域

画布区

将分解的图片和添加的文字显示在画布中

选择区

1. 上传图片 直接本电脑中选中文件上传
2. 填写链接输入框 填写一个线上的gif图片地址，如果图片解析不出来，解决方法是下载图片出来，再使用上方上传，原因是图片不支持跨域
3. 分段选项 将gif解析出来