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 相关文章推荐
让图片旋转任意角度及JQuery插件使用介绍
Mar 20 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
Jun 08 Javascript
AngularJS的表单使用详解
Jun 17 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
jquery插件ContextMenu设置右键菜单
Mar 13 Javascript
vue-resource拦截器设置头信息的实例
Oct 27 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 Javascript
微信公众平台 发送模板消息(Java接口开发)
Apr 17 Javascript
javascript实现遮罩层动态效果实例
May 14 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 Javascript
如何开发一个渐进式Web应用程序PWA
May 10 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
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
php单例模式实现方法分析
2015/03/14 PHP
yii数据库的查询方法
2015/12/28 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
JavaScript实现点击按钮后变灰避免多次重复提交
2013/07/15 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
JS去除重复并统计数量的实现方法
2016/12/15 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
2017/04/11 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
Python中分支语句与循环语句实例详解
2018/09/13 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
django中的图片验证码功能
2019/09/18 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
TCP/IP模型的分界线
2012/12/01 面试题
业务员简历自我评价
2014/03/06 职场文书
公司应聘求职信
2014/06/21 职场文书
五一活动标语
2014/06/30 职场文书
群众路线教育实践活动批评与自我批评
2014/09/15 职场文书
商超业务员岗位职责
2015/02/13 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书