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✨✨ 谢谢
转载于:https://www.cnblogs.com/chengfeng6/p/11493905.html
GIF动态图片分解,多帧动态图分解成多张静态图片相关推荐
- Python 实现 GIF 动态图片分解 , 多帧动态图分解成多张静态图片
文章目录 需求 实现 参考 需求 有时候你看到一张动态图片,其中的一个画面你觉得很不错,想从中提取出来.例如以下这张由多个漂亮小姐姐组成的 GIF 动态图: 实现 GIF 动态图片是由多张静态图片组合 ...
- php合并多张gif图,多张静态图片合成一张动态图-静图合成动图制作
现如今制作gif图片也不是什么难事了,巧用动态图合成软件,即能轻松将多张静态图片合成一张动态图.动态图片是由多张不同的静态图片组合而成的gif格式图片,它会按照一定的顺序和时间进行逐帧播放.做好的动态 ...
- c语言静态图片做成动态效果,怎样把图片做成动态图 两张静态图片加过渡效果制作成gif动图...
近日有朋友问小编说:有两张带文字的图片文件,想要制作成gif格式的动图,并且这两张图片要加上自然的过渡效果,这样怎么制作呢?其实咱们狸窝家园也是有挺多图片制作成gif动图的方法的,只是要添加自然的过渡 ...
- GIF动图拆分为多个静态图片
GIF动图拆分为多个静态图片 1.下载GIF动图,放入指定路径. 2.运行下面代码即可. 最后会存入某个路径,也应提前定义好. from PIL import Image path="D:/ ...
- pdfbox将多页pdf转成多张长图片
(pdfbox将pdf转成图片(jpg或者png) 首先需要说明的几点事情 功能由来 引入jar包 下面贴上代码 关于产生2种报错信息的说明 写在最后 首先需要说明的几点事情 本文是基于pdfbox2 ...
- QT + opencv做的切图软件,将一幅图切成多张并附加在背景上
一个简单的小软件,QT + opencv做的,将一幅图切成多张并附加在背景上,如图: 代码地址: https://gitee.com/xiongqiumin/image-cut exe下载连接: ht ...
- matlab将图片转成eps,【MATLAB】论文图片处理(各种数据图转换成eps格式)
最近跟eps图片杠上了..转载一个人人网上matlab到eps图片输出格式较好的方法 随着Latex在论文编辑和排版的日益普及,越来越多的人写文章都用Latex,数据图表作为论文不可缺少的一部分,如何 ...
- 利用ffmpeg把一帧原始视频数据转换成jpg格式的图片
利用ffmpeg对一帧原始的视频数据转换成jpg格式的图片,保存到本地,用于Android显示 #include <jni.h> #include <stdio.h> #inc ...
- matlab eps格式,【MATLAB】论文图片处理(各种数据图转换成eps格式)
最近跟eps图片杠上了..转载一个人人网上matlab到eps图片输出格式较好的方法 随着Latex在论文编辑和排版的日益普及,越来越多的人写文章都用Latex,数据图表作为论文不可缺少的一部分,如何 ...
- 前端背景图放置_html 多张背景图片并存
我们在制作网页的时候,一般一个DIV放一张图片进去.但是如果放多张呢?答案是可以的,但是就目前浏览器来说只有FF和C支持,IE不支持. div{ background: url("right ...
最新文章
- 深入理解SQL Server 2005 中的 COLUMNS_UPDATED函数
- JAVA -Xms -Xmx -XX:PermSize -XX:MaxPermSize 区别
- 《Python编程从入门到实践》记录之Python处理CSV文件数据
- 软件开发从需求分析开始
- java生成一条唯一的邀请码_根据用户id生成一个唯一邀请码
- Sentaurus入门(2):器件仿真
- 图像叠加文字(点阵字库)原理解析
- 戴尔公司大中华区总裁黄陈宏 要烧哪三把火
- 图片处理的几种算法(毛玻璃效果,高斯模糊效果,旧时光效果,lomo效果,暖意效果)
- Restorator软件使exe文件都不能打开,任务管理器不支持此接口
- 利用seven 7zip的API来进行压缩和解压文件夹
- 基于processing的《代码本色》应用拓展——表现随机行为及牛顿运动学
- 不用命令行WinRAR解压7z.001格式的文件
- 一阶导数 matlab,三阶样条插值(一阶导数边界条件) matlab程序
- Android native和h5混合开发几种常见的hybrid通信方式
- 浅谈XSS跨站脚本攻击
- 淘宝 聚划算 整点免费 支付宝延时时间1秒
- 4月22 mysql常用函数
- 一例所有文件都打不开的数据恢复过程
- VerifyCodeUtil 验证码工具类的使用
热门文章
- 【Spark重点难点08】Spark3.0中的AQE和DPP小总结
- Line3d安装;bundler+pmvs;opencv_contrib
- 经理人必看的十个管理网站
- matlab谱系聚类图,如何看懂SPSS聚类分析的树状图/谱系图?
- Android常用的 adb shell命令
- LayaAirIDE的可视化2D物理使用文档
- E680最强综合技巧集合
- 虚拟仿真实验室 服务器,网络及教学信息化平台-虚拟仿真实验室
- #1024程序员节# cc2530 按键唤醒功耗模式PM3例程
- nfc加密卡pm3和pm5区别_【黑科技】NFC模拟门卡门禁