js实现GIF图片的分解和合成
无意中看到一篇文章写得是关于纯前端处理GIF图片的问题，感觉挺有意思的所以自己也实现了一下；
主要用到的有两个第三方库：合成GIF图片的gif.js和分解的libgif.js;
分解GIF
1.引入Git库
importSuperGiffrom'./libgif.js'
2.处理图片
varfile=e.target.files[0];
console.log(file.type.indexOf('image/gif'));
load_gif(file);
functionload_gif(gif_source){
vargifImg=document.getElementById('gifImg');
//gif库需要img标签配置下面两个属性
gifImg.setAttribute('rel:animated_src',URL.createObjectURL(gif_source))
gifImg.setAttribute('rel:auto_play','0')
//新建gif实例
varrub=newSuperGif({gif:gifImg});
varrunning=false;
rub.load(function(){
varimg_list=[];
varj=0;
console.log(rub.get_length());
for(vari=1;i<=rub.get_length();i++){
//遍历gif实例的每一帧
rub.move_to(i);
varimgImage=newImage();
//canvas生成base64图片数据
imgImage.src=rub.get_canvas().toDataURL('image/jpeg',0.8);
}
}
合成GIF图片
1.引入Git库
importGIFfrom'./gif.js'
2.图片合成
vargif=newGIF({
workers:2,
quality:10,
workerScript:'js/gif.worker.js'
});
varj=0;
varcanvas=document.createElement("canvas");
varctx=tCanvas.getContext('2d');
for(vari=1;i<=len;i++){
varimgImage=newImage();
imgImage.src=img;
imgImage.onload=function(e){
//Canvas绘制图片
canvas.width=width;
canvas.height=height;
console.log(width,height)
//铺底色
ctx.fillStyle="#fff";
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.drawImage(imgImage,0,0,width,height);
gif.addFrame(canvas,{copy:true,delay:50});
j++;
//图片
if(j>=len){
gif.render()
};
}
}
gif.on('finished',function(blob){
//生成图片链接
varurl=URL.createObjectURL(blob);
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。