js实现GIF动图分解成多帧图片上传


Posted in Javascript onOctober 24, 2019

在项目中遇到需要支持上传gif图片,并把其分解的帧图片一次展示给用户。话不多说直接上代码

分解gif图片需要使用libgif-js这个库!

1. 引入Git库

import SuperGif from './libgif.js'

2. 分解Gif为png图片

const GifDecomposer = {
  structureGifObject (gifFiles, cb) { // gifFiles 获取的文件对象 e.target.files[0]
    const gifImg = document.createElement('img');
    gifImg.setAttribute('rel:animated_src', URL.createObjectURL(gifFiles));
    gifImg.setAttribute('rel:auto_play', '0');
    // Modified pictures must be added to the body
    document.body.appendChild(gifImg);
    // Construction example
    var rub = new SuperGif({ gif: gifImg });
    rub.load(() => {
      var img_list = [];
      for (let i=1; i <= rub.get_length(); i++) {
        // Traversing through each frame of a GIF instance
        rub.move_to(i);
        // Converting each frame of canvas into a file object
        let cur_file = this.convertCanvasToImage(rub.get_canvas(), gifFiles.name.replace('.gif', '') + `-${i}`)
        img_list.push({
          file_name: cur_file.name,
          url: URL.createObjectURL(cur_file),
          file: cur_file,
        })
      }
      cb(img_list)
    });
  },
  dataURLtoFile (dataurl, filename) {
    const arr = dataurl.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    const bstr = atob(arr[1]);
    var n = bstr.length;
    const u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {type:mime});
  },
  convertCanvasToImage (canvas, filename) {
    return this.dataURLtoFile(canvas.toDataURL('image/png'), filename);
  }
}

3. 上传每一张图片

/**
 * costume upload GIF decomposer
 */
 const filesImg = function (list, storage, costumeFormat, assetType, handleCostume) {
  let proDataList = list.map((item, index) => {
      return new Promise(function(resolve, reject) {
        let reader = new FileReader();
        reader.readAsArrayBuffer(item.file);
        reader.onload = () => {
          let data = {result: reader.result, type: item.file.type, name: item.file.name}
          resolve(data);
        };
        reader.onerror = (error) => {reject(error)};
      })
    })
  Promise.all(proDataList).then(res => {
    res.forEach(item => {
    // 上传
    })
  }).catch(data => {console.log(data)})
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 用CreateElement动态创建标签示例
Nov 20 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
后台获取ZTREE选中节点的方法
Feb 12 Javascript
原生JS实现响应式瀑布流布局
Apr 02 Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
Jul 27 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
用原生JS实现简单的多选框功能
Jun 12 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
Vue封装Axios请求和拦截器的步骤
Sep 16 Javascript
js实现简单掷骰子效果
Oct 24 #Javascript
使用jQuery实现掷骰子游戏
Oct 24 #jQuery
jquery实现掷骰子小游戏
Oct 24 #jQuery
JS控制GIF图片的停止与显示
Oct 24 #Javascript
js计时事件实现圆形时钟
Mar 25 #Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 #Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 #Javascript
You might like
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
PHP后期静态绑定实例浅析
2018/12/21 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
javascript concat数组累加 示例
2009/09/03 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
JS实现n秒后自动跳转的两种方法
2020/11/30 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
在vue中给列表中的奇数行添加class的实现方法
2018/09/05 Javascript
深入学习JavaScript 高阶函数
2019/06/11 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
2020/10/02 Javascript
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
windows下Virtualenvwrapper安装教程
2017/12/13 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
Numpy截取指定范围内的数据方法
2018/11/14 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
Python全面分析系统的时域特性和频率域特性
2020/02/26 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
python把一个字符串切开的实例方法
2020/09/27 Python
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
中学教师岗位职责
2013/11/26 职场文书
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
申请任职学生会干部自荐书范文
2014/02/13 职场文书
党建工作整改措施
2014/10/28 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
中国古风插画师排行榜:夏达第一,第三是阴阳师姑获鸟皮肤创作者
2022/03/18 国漫