无意中看到一篇文章写得是关于纯前端处理GIF图片的问题,感觉挺有意思的所以自己也实现了一下,
主要用到的有两个第三方库:合成GIF图片的gif.js和分解的libgif.js;
<>强分解GIF
1。引入Git库
从“进口SuperGif。/libgif.js '
2。处理图片
var文件=e.target.files [0];
”image/gif console.log (file.type.indexOf ('));
load_gif(文件);
函数load_gif (gif_source) {
var gifImg=. getelementbyid (“gifImg”);//gif库需要img标签配置下面两个属性
gifImg。setAttribute (rel: animated_src, URL.createObjectURL (gif_source))
gifImg。setAttribute (rel: auto_play ', ' 0 ')//新建gif实例
var摩擦=new SuperGif ({gif: gifImg});
var=false运行;
rub.load(函数(){
var img_list=[];
var j=0;
console.log (rub.get_length ());
(var i=1;我& lt;=rub.get_length ();我+ +){//遍历gif实例的每一帧
rub.move_to(我);
var imgImage=新形象();//帆布生成base64图片数据
imgImage。src=https://www.yisu.com/zixun/rub.get_canvas () .toDataURL(图像/jpeg, 0.8);
}
}
<强>合成GIF图片
1。引入Git库
从“进口GIF。/gif.js '
2。图片合成
var gif=new gif ({
工人:2
质量:10
workerScript:“js/gif.worker.js”
});
var j=0;
画布var=document.createElement(“画布”);
var ctx=tCanvas.getContext (2 d);
(var i=1;我& lt;=兰;我+ +){
var imgImage=新形象();
imgImage。src=https://www.yisu.com/zixun/img;
imgImage。onload=function (e) {//帆布绘制图片
画布。宽度=宽度;
画布。身高=身高;
console.log(宽度、高度)//铺底色
ctx。fillStyle=" # fff”;
ctx。fillRect(0, 0,画布。宽度,canvas.height);
ctx。drawImage (imgImage 0 0、宽度、高度);
gif.addFrame(画布,{副本:真的,延迟:50});
+ +;//图片
如果(j>=len) {
gif.render ()
};
}
}
gif。(“完成”,函数(blob) {//生成图片链接
var url=URL.createObjectURL (blob);
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
