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