gif生成工具，gif动图分解
体验地址
- 工具地址 由于挂载在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✨✨ 谢谢
gif生成工具，gif动图分解相关推荐
- ArcGIS中ArcMap时间滑块功能对长时间序列栅格遥感影像进行动态显示并生成视频或动图
本文介绍基于ArcMap软件,利用时间滑块功能,对大量多时相栅格遥感影像数据进行动态显示,并生成视频或动图的方法. 首先,我们需要在ArcMap软件中新建一个镶嵌数据集,并将全部的多时像遥感影 ...
- vue项目将多张图片生成一个gif动图
当前做项目有一个需求是将多张图片生成一个gif动图的形式 类似下面图片几张图片叠加生成一个gif动图 图片涉及工作隐私,就不公开啦 我们要引入一个gif.js的引入包,但是他没有直接引入的方式,只能从 ...
- 如何生成动态matlibplot动图？
简 介: 本文给出了将matlibplot的图片组合成动图对应的子程序. 关键词: PlotGIF,动图 #mermaid-svg-AdyfyNiu6xFaA0vb .label{font-famil ...
- Python turtle 生成鸡哥动图，以及对鸡哥图片的爬取(附源码，注释）
大一上学期Python大作业: 简述: 一. python turtle 库绘图,并实现动图效果 (1)篮球召唤阵 (2)铁山靠及打球 (3)哥哥投篮 (4)对鸽鸽的真心 二. 爬虫爬取鸡哥图片 (1 ...
- 【工具】动图展示 60+ 个前端常用插件库合集
作者:寒青 https://segmentfault.com/a/1190000019151460 DataTables 官网:https://www.datatables.net/ DataTabl ...
- 【图神经网络DGL】GCN在Karate Club上的实战（消息传递范式 | 生成训练可视化动图）
学习总结 回顾[图神经网络DGL]数据封装和消息传递机制 的数据封装,在做异构图神经网络时,DGL比PyG方便很多(尽管PyG已经支持了异构图Aminer和栗子,但对图结构数据做批处理还是需要自己实现 ...
- 怎样在线制作动图？教你一键在线生成gif
接下来,要介绍[GIF5工具网]是一款专业的gif动图(https://www.gif5.net/)制作工具,操作简单,仅需上传mp4格式的视频,一键即可快速完成视频转gif的操作.如果生成的gif动 ...
- gif动图表情包如何制作？教你一键生成gif表情包
随着网络的普及,gif动图表情包在广大网民中非常流行.那么,gif动图表情包是如何制作的呢? 一般来说,gif动图表情包的制作需要专业的软件工具.常用的软件工具有SOOGIF动图.Adobe Phot ...
- 如何快速生成gif动图表情包？教你制作gif表情包图片
Gif动图作为当代网络较为流行的一种图片格式,经常会在公众号推文中.聊天软件聊天中见到其身影.那么,gif动图表情包是如何制作的呢?通常情况下,制作gif动画图片需要专业的工具,而大家可以使用[GIF ...
- 动图怎么分解成图片？Gif图片如何在线分解
Gif动图就是由一帧一帧的静态画面合成的.那么,当我们想要将gif动图分解成静图的时候要怎么拆分gif图呢?给大家,推荐一款简单实用的gif分解(https://www.gif.cn/giffenji ...
最新文章
- [转]C#日期格式化 文档
- 如何提高强化学习效果？内在奖励和辅助任务
- Jupyter Notebook已出现“返祖现象”，这款工具让你在终端里使用它
- word2vector 讲的比较好的文章
- poj 1981(单位圆覆盖点)
- [转帖]TLS 版本问题
- 如何设置XMind思维导图线条
- jQuery 插件autocomplete 应用
- easyui---基础组件：window
- 巨坑：从Sqoop导入MySQL导入TINYINT(1)类型数据到hive（tinyint），数据为null
- android——数据库版本升/降级问题
- 关于MSDTC - 与基础事务管理器的通信失败 错误解决的小备忘
- NOD 32 企业版远程管理服务器病毒库更新失败_七夕小子_新浪博客
- ［和秋叶一起学ppt］四步教你变身高富帅ppt（笔记）
- H264编码格式--图文解释
- docker-compose 启动顺序的问题depends_on
- 微信小程序 -对应的服务器证书无效
- gorm中使用where in 条件
- 异常检测（2）—基于统计学的方法
- 什么是BASE最终一致性