背景

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

  • 首先公司最近在做一款表情包的产品，需要将文字生成到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. 【POJ - 1862】Stripies （贪心）

    Stripies 直接上中文了 Descriptions 我们的化学生物学家发明了一种新的叫stripies非常神奇的生命.该stripies是透明的无定形变形虫似的生物,生活在果冻状的营养培养基平板 ...

  2. HttpClientFactory 使用说明 及 对 HttpClient 的回顾和对比

    目录 HttpClient 日常使用及坑点: HttpClientFactory 优势: HttpClientFactory 使用方法: 实战用法1:常规用法 1. 在 Startup.cs 中进行注 ...

  3. Android 9.0 关机流程分析

    极力推荐文章:欢迎收藏 Android 干货分享 阅读五分钟,每日十点,和您一起终身学习,这里是程序员Android 本篇文章主要介绍 Android 开发中的部分知识点,通过阅读本篇文章,您将收获以 ...

  4. 【Java例题】2.3 计算银行存款本息

    3.计算银行存款本息. 用户输入存款金额money,存款期years和年利率rate, 根据公式: sum=money(1+rate)^years ,计算到期存款本息. 这里的"^" ...

  5. python异常处理-异常捕获-抛出异常-断言-自定义异常-UDP通信-socketserver模块应用-3

    异常捕获 异常:程序在运行过程中出现了不可预知的错误,并且该错误没有对应的处理机制,那么就会以异常的形式表现出来 影响:整个程序无法再正常运行 异常的结构 异常的类型 NameError 异常的信息 ...

  6. 数据结构之最小堆的实现C++版

    完全二叉树之所以用数组的方式存在,在于他的一个特性 若子节点为i,则父节点为(i-1)/2,注意c++特性,该结果肯定是个整数. 若父节点为j,则子节点必为2*j+1;则在数组里面可以非常方便的通过下 ...

  7. 洛谷 P4401 [IOI2007]Miners 矿工配餐

    题意简述 有两个矿洞,已知食物的种类(≤3)和顺序,将他们送往任一矿洞, 若一个矿洞3次食物相同,贡献1:若有2种不同食物,贡献2:若有3种不同食物,贡献3 求最大贡献 题解思路 food[i] 为当 ...

  8. 用友网络科技Java高级开发面试题（2019）

    面试时间:2019年8月18日上午9:30 面试岗位:Java高级开发 面试形式:电话面试 这些天在boss上逛了下,看见北京Java开发工资比较诱人,便萌生了去北京的想法,做一名北漂的程序猿.约了几 ...

  9. Elasticsearch 7.x 最详细安装及配置

    Elasticsearch 7.x 最详细安装及配置 一.Elasticsearch 7.x 小马哥说过,学习技术栈得看版本,那么 Elasticsearch 7.x 有什么好的特性呢? ES 7.0 ...

  10. 小白系统篇-windows 系统安装

    现阶段装系统的方法基本有几种1.硬盘安装2.光驱安装3.PE(u盘即可)安装 现在比较主流方便的用pe安装,所以我们这边就说一下PE安装系统的方法 首先我们了解下系统镜像,也就是你装系统所需得到文件( ...