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

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

分解gif图片需要使用https://github.com/buzzfeed/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 bodydocument.body.appendChild(gifImg);// Construction examplevar 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 instancerub.move_to(i);// Converting each frame of canvas into a file objectlet 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)})}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！