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 相关文章推荐
Javascript string 扩展库代码
Apr 09 Javascript
BootStrap selectpicker
Jun 20 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
AngularJS 控制器 controller的详解
Oct 17 Javascript
详解Chai.js断言库API中文文档
Jan 31 Javascript
解决linux下node.js全局模块找不到的问题
May 15 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
Jun 14 Javascript
详解微信小程序调起键盘性能优化
Jul 24 Javascript
使用layui的layer组件做弹出层的例子
Sep 27 Javascript
vue监听键盘事件的相关总结
Jan 29 Vue.js
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
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
document.all与WEB标准
2020/05/13 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
js获取隐藏元素的宽高
2017/02/24 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
使用vscode快速建立vue模板过程详解
2019/10/10 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
TensorFlow实现随机训练和批量训练的方法
2018/04/28 Python
python opencv实现运动检测
2018/07/10 Python
python检测服务器端口代码实例
2019/08/31 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
Python通过Pillow实现图片对比
2020/04/29 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
5分钟实现Canvas鼠标跟随动画背景
2019/11/18 HTML / CSS
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
技术总监岗位职责
2013/12/05 职场文书
英语专业职业生涯规划范文
2014/03/05 职场文书
交通事故协议书
2014/04/15 职场文书
团日活动总结怎么写
2014/06/25 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
党员民主评议个人总结
2014/10/20 职场文书
爱心助学感谢信
2015/01/21 职场文书
2015党建工作简报
2015/07/21 职场文书
2016特色励志班级口号
2015/12/24 职场文书
vue组件的路由高亮问题解决方法
2021/05/11 Vue.js