背景
为什么要制作这么一款工具
- 首先公司最近在做一款表情包的产品，需要将文字生成到gif图片中，并可以控制文字显示的位置，并将不同的文字显示在不同的图片上
- 制作成网页端工具，随时随地，方便使用
探索
- 首先需要将GIF图片分帧，通过查找发现了这个库buzzfeed/libgif-js
- 要将生成的文字，可以任意编辑放到图片上，发现了这个库fabric.js
- 要预览或者下载生成新的GIF图片，用到了这个库yahoo/gifshot
分析
主要实现思路是
- 将gif动图经过gif库解析成gif实例
- 遍历获取gif实例的每一帧的canvas，转换成baseURL，再转一份file对象存放起来
- 将转换后的baseURL通过fabric展示到界面上，并实现文字任意操作功能
代码仓库
gitHub地址详细用法和注意事项请参考README
体验地址
- 填写网络url图片地址详细介绍请参考备注
- 本地上传gif图片文件详细介绍请参考备注
备注
- 图片地址请输入https格式
- 分解完图片后，请拖动左右滚动条查看全部图片
- 分解gif图片链接功能不支持跨域功能，如果发现所填图片地址没问题，但是发现图片就是加载解不出来，F12进入调试台看一下，多半是图片跨域报错了，解决方法是下载图片出来，再使用input上传功能
- 本人完全是在谷歌浏览器开发出来的，没有考虑任何兼容问题，请在谷歌浏览器测试
- 因为代码体验部署在在github page上，所以打开会感到有些卡顿，如需快速打开，请自行解决vpn问题
- 分帧的图片和生成的图片宽度固定为300px，后期可以添加动态的大小
- 点击生成图片后，可以将生成图片下载出来，如要使用请注意版权问题，如出现版权纠纷，本库概不负责
- 如有其它问题请下方留言
创作不易，如果对你有帮助，请移步gitHub地址给个星星 star✨✨ 谢谢