纯 JS 实现 GIF 图片分解，自定义文字，合成新的gif动图
2019-09-25 本文已影响0人
志军_39e2
体验地址
- 工具地址 由于挂载在github page上，打开速度会慢一些，请耐心等待或自行解决git网速问题
背景
为什么要制作这么一款工具
最近在做一款表情包的产品，需要将文字生成到gif图片中，并可以控制文字显示的位置，并将不同的文字显示在不同的图片上，只需要提供坐标传给后端就可以了，但是我想直接生成图片出来，通过不断尝试，终于完成了此功能
分析
主要实现思路是
- 将gif动图经过gif库解析成gif实例
- 遍历获取gif实例的每一帧的canvas，转换成baseURL，再转一份file对象存放起来
- 将转换后的baseURL通过fabric展示到canvas界面上，并添加文字实现文字任意操作功能
- 将每一帧图片合成后生成新的gif图片
使用教程
工具从上往下一共分为3个区域
画布区
将分解的图片和添加的文字显示在画布中
选择区
- 上传图片 直接本电脑中选中文件上传
- 填写链接输入框 填写一个线上的gif图片地址，如果图片解析不出来，解决方法是下载图片出来，再使用上方上传，原因是图片不支持跨域
- 分段选项 将gif解析出来的图片分成几个区域显示，支持2 3 4
- 帧间隔 预览或者生成的gif中每一帧图片的显示间隔时间，最小取值0.02，单位s
- 图片大小 生成图片的大小，默认300px，单位px
- 预览图片 仅供预览观看，默认宽300px，高自适应
- 生成图片 可以下载图片使用
属性操作区
- 每一个方格对应画布中每一个区域的文字属性
- 最后一个方格可以控制操作全部文字
注: 文字位置不要偏离对应的那张图片中，要不然会出现图片消失或显示不完整
属性详解
| 属性 | 说明 | 默认 |
|---|---|---|
| 帧数 | 每一段区域图片数量 | 自动计算，也可点击下方+ -号设置 |
| 左边距 | 文字距离左边框距离 | 0 |
| 上边距 | 文字距离上边框距离 | 0 |
备注
- 本人是在谷歌浏览器调试开发的，没有考虑任何兼容问题，最好在谷歌浏览器使用
- 点击生成图片后，可以将生成图片下载出来，如需使用请注意版权问题，如出现版权纠纷，本库概不负责
- 如有其它问题请下方留言
特别感谢
- GIF图片分帧buzzfeed/libgif-js
- canvas操作fabric.js
- 生成GIF图片yahoo/gifshot
创作不易，如果对你有帮助，请移步gitHub地址给个星星 star✨✨ 谢谢
