纯 JS 实现 GIF 图片分解，自定义文字，合成新的gif动图

志军_39e2

0.490 2019-09-25 16:23 IP属地: 上海

体验地址

工具地址由于挂载在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，高自适应

生成图片可以下载图片使用

属性操作区

每一个方格对应画布中每一个区域的文字属性

最后一个方格可以控制操作全部文字
注: 文字位置不要偏离对应的那张图片中，要不然会出现图片消失或显示不完整

本人是在谷歌浏览器调试开发的，没有考虑任何兼容问题，最好在谷歌浏览器使用

点击生成图片后，可以将生成图片下载出来，如需使用请注意版权问题，如出现版权纠纷，本库概不负责

如有其它问题请下方留言

GIF图片分帧 buzzfeed/libgif-js

canvas操作 fabric.js

生成GIF图片 yahoo/gifshot
创作不易，如果对你有帮助，请移步 gitHub地址给个星星 star✨✨ 谢谢

推荐文章

强健的四季豆 · HTML JS 動態顯示 input file 選取內容 - LinYoYo_攻城獅_學習筆記

3 月前

飞翔的感冒药 · Android WebView应用WebSocket本地/公网IP自动切换及JS合并咨询

3 月前

发财的李子 · js 使用预签名(presigned) url 上传文件到 AWS S3服务（解决生成的文件格式错误问题）_getpresigneduploadurl

2 月前

豪情万千的饭盒 · 響應式 API：核心 | Vue.js

2 月前

英勇无比的野马 · 系上智慧“安全绳”！海盐试水电动自行车全生命周期数字化管理

2 年前

谦逊的开心果 · 文史 | 民国书法家杨信甫与十七路军往事_汉中_杨虎城_赵寿山

2 年前

朝气蓬勃的油条 · 观致7 - 知乎

2 年前

没有腹肌的沙滩裤 · 大数据平台-元数据管理系统解析_业务数据权限归属_彩色蚂蚁的博客-CSDN博客

3 年前

豪气的鸡蛋面 · 273里挑1，专家解读为何大隅良典独得诺贝尔奖_手机新浪网

3 年前