js实现GIF图⽚的分解和合成
⽆意中看到⼀篇⽂章写得是关于纯前端处理GIF图⽚的问题，感觉挺有意思的所以⾃⼰也实现了⼀下；主要⽤到的有两个第三⽅库：合成GIF图⽚的gif.js和分解的libgif.js;
分解GIF
1. 引⼊Git库
import SuperGif from './libgif.js'
2. 处理图⽚
var file = e.target.files[0];
console.pe.indexOf('image/gif'));
load_gif(file);
function load_gif(gif_source) {
var gifImg = ElementById('gifImg');
// gif库需要img标签配置下⾯两个属性
gifImg.setAttribute('rel:animated_src', ateObjectURL(gif_source))
gifImg.setAttribute('rel:auto_play', '0')
// 新建gif实例
var rub = new SuperGif({ gif: gifImg } );
var running = false;
rub.load(function(){
var img_list = [];
var j = 0;
console._length());
for (var i=1; i <= _length(); i++) {
/
/ 遍历gif实例的每⼀帧
var imgImage = new Image();
//canvas⽣成base64图⽚数据
imgImage.src = _canvas().toDataURL('image/jpeg',0.8);
}
}
合成GIF图⽚
1. 引⼊Git库
import GIF from './gif.js'
2. 图⽚合成
var gif = new GIF({
workers: 2,
quality: 10,
workerScript: 'js/gif.worker.js'
});
var j = 0;
var canvas= ateElement("canvas");
var ctx = Context('2d');
for (var i=1; i <= len; i++) {
var imgImage = new Image();
imgImage.src = img;
//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) {
};
}
}
<('finished', function(blob) {
//⽣成图⽚链接
var url = ateObjectURL(blob);
}
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。