js实现GIF动图分解成多帧图片上传
在项目中遇到需要支持上传gif图片，并把其分解的帧图片一次展示给用户。话不多说直接上代码
分解gif图片需要使用libgif-js这个库！
1.引入Git库
importSuperGiffrom'./libgif.js'
2.分解Gif为png图片
constGifDecomposer={
structureGifObject(gifFiles,cb){//gifFiles获取的文件对象e.target.files[0]
constgifImg=document.createElement('img');
gifImg.setAttribute('rel:animated_src',URL.createObjectURL(gifFiles));
gifImg.setAttribute('rel:auto_play','0');
//Modifiedpicturesmustbeaddedtothebody
document.body.appendChild(gifImg);
//Constructionexample
varrub=newSuperGif({gif:gifImg});
rub.load(()=>{
varimg_list=[];
for(leti=1;i<=rub.get_length();i++){
//TraversingthrougheachframeofaGIFinstance
rub.move_to(i);
//Convertingeachframeofcanvasintoafileobject
letcur_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){
constarr=dataurl.split(',');
constmime=arr[0].match(/:(.*?);/)[1];
constbstr=atob(arr[1]);
varn=bstr.length;
constu8arr=newUint8Array(n);
while(n--){
u8arr[n]=bstr.charCodeAt(n);
}
returnnewFile([u8arr],filename,{type:mime});
},
convertCanvasToImage(canvas,filename){
returnthis.dataURLtoFile(canvas.toDataURL('image/png'),filename);
}
}
3.上传每一张图片
/**
*costumeuploadGIFdecomposer
*/
constfilesImg=function(list,storage,costumeFormat,assetType,handleCostume){
letproDataList=list.map((item,index)=>{
returnnewPromise(function(resolve,reject){
letreader=newFileReader();
reader.readAsArrayBuffer(item.file);
reader.onload=()=>{
letdata={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)})
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。