js实现GIF动图分解成多帧图片上传
作者:leez1212 发布时间:2023-08-15 00:06:38
标签:js,图片上传
在项目中遇到需要支持上传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)})
}
来源:https://blog.csdn.net/weixin_42856280/article/details/89372802
0
投稿
猜你喜欢
- 获取指定日期月份的第一天,你可以使用DATEADD函数,减去指定日期的月份过去了的天数,即可。 代码如下:CREATE FUNC
- asp如何将RGB颜色转化成到16进制的?在R G B中输入小于255的数字点击观看即可转换成#开通的16进制。代码如下:<%R_RG
- 异步 innerHTMLinnerHTML 插入节点的性能的问题,通常是我们最关注的。在回答这问题时,James Padolsey 给出了他
- A.动态页面第一步:创建转向控制页面,创建网站默认的首页文件(通常为"index.asp"或"default.
- 两个文章,放在一块了。第二个比较强。====================================================
- 大部分数据库管理员拥有某种形式的数据库元数据库,他们依赖其来跟踪范围很广的Microsoft SQL Server环境。我利用连接的服务器和
- asp+access用户登录代码,loginnew.asp网面包含了登录框及验证用户的代码an.mdb数据库名fd表名y_username用
- 在一般的MIS应用中,会有大量的报表,此时我们可以在后台数据库编写相应的视图或存储过程,用ASP通过ADO调用以完成报表工作。下面用一个例子
- 前言终于下定决心学习Python了。既然从头开始,就需要认认真真。首先需要说的是,我是初学Python,这篇文章只是用于展示global和n
- 1. 简介本文将介绍 Go 语言中的 sync.Cond 并发原语,包括 sync.Cond的基本使用方法、实现原理、使用注意事项以及常见的
- 症状: 访问asp网页的时候出现如下错误:Server object error ''ASP 0178 : 80070005
- 本文介绍了使用Application来统计访问网站的在线人数的方法,并介绍了使用Application时应该注意的事项。首先讲明白,用ASP
- 在MySQL中,如何实现Top N及M至N段的记录查询?我们可以利用MySQL中SELECT支持的一个子句——LIMIT——来完成这项功能。
- 在matlab中,存在执行直接得函数来添加高斯噪声和椒盐噪声。Python-OpenCV中虽然不存在直接得函数,但是很容易使用相关的函数来实
- 内容摘要:在本人上一篇教程《彻底弄懂CSS盒子模式五(定位强化练习) 》有讲到一个很酷的链接面板提示的实例制作,那时主要是用到di
- 版本 0.9来自 http://onewww.net说明:当焦点不在表格内的input时,回车键复制最后一行,delete删除键最后一行选择
- ASP是目前一种广为应用的用来快速构建动态WEB站点的编程语言,默认的内置开发语言是VBScript,由于ASP和微软Windows系列操作
- 最常见的XML数据类型有:Element, Attribute,Comment, Text. &nbs
- 本程序属于一种特别的方法。使用范围比较有限,而且有一定的危险性。借鉴了asp后门里的一些方法。由于读取某IP的网卡MAC地址本程序通过调用a
- 输入汉字提示拼音,试试下面这个函数,不知是不是你要的那个:查询汉字便宜到词典网<%function getpychar(ch