背景

为什么要制作这么一款工具

  • 首先公司最近在做一款表情包的产品，需要将文字生成到gif图片中，并可以控制文字显示的位置，并将不同的文字显示在不同的图片上
  • 制作成网页端工具，随时随地，方便使用

探索

  • 首先需要将GIF图片分帧，通过查找发现了这个库buzzfeed/libgif-js
  • 要将生成的文字，可以任意编辑放到图片上，发现了这个库fabric.js
  • 要预览或者下载生成新的GIF图片，用到了这个库yahoo/gifshot

分析

主要实现思路是

  • 将gif动图经过gif库解析成gif实例
  • 遍历获取gif实例的每一帧的canvas，转换成baseURL，再转一份file对象存放起来
  • 将转换后的baseURL通过fabric展示到界面上，并实现文字任意操作功能

代码仓库

gitHub地址详细用法和注意事项请参考README

体验地址

备注

  • 图片地址请输入https格式
  • 分解完图片后，请拖动左右滚动条查看全部图片
  • 分解gif图片链接功能不支持跨域功能，如果发现所填图片地址没问题，但是发现图片就是加载解不出来，F12进入调试台看一下，多半是图片跨域报错了，解决方法是下载图片出来，再使用input上传功能
  • 本人完全是在谷歌浏览器开发出来的，没有考虑任何兼容问题，请在谷歌浏览器测试
  • 因为代码体验部署在在github page上，所以打开会感到有些卡顿，如需快速打开，请自行解决vpn问题
  • 分帧的图片和生成的图片宽度固定为300px，后期可以添加动态的大小
  • 点击生成图片后，可以将生成图片下载出来，如要使用请注意版权问题，如出现版权纠纷，本库概不负责
  • 如有其它问题请下方留言

创作不易，如果对你有帮助，请移步gitHub地址给个星星 star✨✨ 谢谢

用户上传gif动图分解成多张帧图片，并合并生成新gif图片的更多相关文章

  1. js将用户上传gif动图分解成多张帧图片

    js将用户上传gif动图分解成多张帧图片 写在前面 工作中遇到一个这么一个需求:这是一个多图上传的场景,如果用户上传选择多张图片,则上传后直接展示多张图片,如果上传的图片是gif动图,则需要分解这张动 ...

  2. Gift动图分解小工具

    gif 动图分解小工具 Overview 因为自己有时候需要将一些gif图片分解,但是没有在网上找到合适的工具,所有就自己写了一个,在这里与大家分享,其实实现很简单,是通过C#实现的.文章下方有下载链 ...

  3. springboot配置虚拟路径访问用户上传的附件及图片资源

    在springmvc项目中,我们通常把图片及附件存放到WEB-INF/upload类似的路径. springboot项目是通过jar包方式运行的. 笔者曾尝试以下代码,把图片转成base64格式的图片 ...

  4. Django项目实战之用户上传与访问

    1 将文件保存到服务器本地 upload.html <!DOCTYPE html> <html lang="en"> <head> <me ...

  5. ubuntu server vsftpd 匿名用户上传下载及目录设置

    ubuntu server vsftpd 匿名用户上传下载及目录设置 1:vsftpd服务器安装: sudo apt-get install vsftpd #安装 cd /srv/ #切换到默认匿名用 ...

  6. 第37课 thinkphp5添加商品基本信息及通过前置钩子上传商品主图 模型事件(勾子函数)

    目录 手册地址: before_insert(新增之前的操作) 要实现的功能 思路 触发条件: 1. 控制器里必须要调用模型的save()方式保存数据,用insert()触发不了勾子函数的 2. 模型 ...

  7. vue : 检测用户上传的图片的宽高

    需求: 用户可上传3-6张图片(第 1 2 3 张必须传),上传的图片必须是540 * 330 像素. 第一步,获取上传的图片的宽高. 初始化一个对象数组,宽高均设为0. 如果用户上传的图片没有上限, ...

  8. ASP.Net中实现上传过程中将文本文件转换成PDF的方法

    iTextSharp是一个常用的PDF库,我们可以使用它来创建.修改PDF文件或对PDF文件进行一些其他额外的操作.本文讲述了如何在上传过程中将文本文件转换成PDF的方法. 基本工作 在开始之前,我们 ...

  9. 解决IIS7.0服务和用户上传的文件分别部署在不同的电脑上时，解决权限的问题

    为解决IIS服务和用户上传的文件分别部署在不同的电脑上时,解决权限的问题. 定义: A:iis服务器 B:文件服务器 步骤: 1.在B上创建一个用户[uploaduser](并设置密码) 2.给B上的 ...

随机推荐

  1. 从js 讲解时间复杂度和空间复杂度

    1. 博客背景 今天有同事在检查代码的时候,由于函数写的性能不是很好,被打回去重构了,细思极恐,今天和大家分享一篇用js讲解的时间复杂度和空间复杂度的博客 2. 复杂度的表示方式 之前有看过的,你可能 ...

  2. 深入了解String和intern

    引言 在 JAVA 语言中有8中基本类型和一种比较特殊的类型String.这些类型为了使他们在运行过程中速度更快,更节省内存,都提供了一种常量池的概念.常量池就类似一个JAVA系统级别提供的缓存. 8 ...

  3. UR机器人通信--上位机通信(python)

    一.通信socket socket()函数 Python 中,我们用 socket()函数来创建套接字,语法格式如下: socket.socket([family[, type[, proto]]]) ...

  4. 【网站公告】.NET Core 版博客站点第二次发布尝试

    在上次发布失败后,很多朋友建议我们改用 k8s ,但我们还是想再试试 docker swarm ,实在不行再改用 k8s . 在改进了 docker swarm 集群的部署后,我们准备今天 17:30 ...

  5. ThreadLocal为什么会内存泄漏

    1.首先看下ThreadLocal的原理图: 在ThreadLocal的生命周期中,都存在这些引用. 其中,实线代表强引用,虚线代表弱引用: 2.ThreadLocal的实现:每个Thread维护一个 ...

  6. cookie session sessionStorage localStorage

    什么是会话? 会话指的是浏览器与服务器之间的数据交互.所白了就是 浏览器和服务器进行的请求和响应. http协议是无状态的,多次请求之间没有关联性 cookie和session的作用?干啥的? 利用c ...

  7. poj 1286 polya定理

    Necklace of Beads Description Beads of red, blue or green colors are connected together into a circu ...

  8. 编程使用c#连接到IBM db2的两种方式

    一:使用c#通过odbc连接到IBM db2使用 ConnectionString 属性连接到各种数据源. 部署:只要在客户端安装IBM DB2 ODBC driver.配置DSn即可. 1):可以单 ...

  9. vue-cli+v-charts实现移动端可视化图表

    v-charts是饿了么团队开源的一款基于Vue和Echarts的图表工具,在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化.修改复杂的配置项,v-charts 的出现正是为了解决这个 ...

  10. java 计算器

    初识java:利用swing制作一个简单的计算器,仿造window10内置计算器标准模式下的界面. 涉及学习内容: 设置窗口 设计界面按键 设置文本框:只读 String字符串操作:与double类型 ...