上次介绍了Canvas自定义图片大小及蒙版与生成gif图，没有详细的说明如何生成gif图，生成gif图的过程也可以进行一些优化。
我们无需借助第三方库，直接使用canvas原生的api就可以完成很多的功能。
效果
这里只是说明功能，细节上还未仔细调，清楚了核心部分其余边边角角处理起来会很快。
比较丑的效果
过程
- 准备素材
- 一个头像，如何获取头像，Canvas自定义图片大小及蒙版与生成gif图有提到。
- 几张财神图
- gif.js库
- 页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Gif</title>
<script src="gif.js"></script>
</head>
<body>
<canvas width="480" height="480" id="canvas">
</canvas>
<img src="images/1.png" id="img">
<img src="" id="result">
</body>
<script>
window.onload = function () {
var oImg = document.getElementById("img");
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d')
let gif = new GIF({
workers: 4,
quality: 30,
workerScript: "./gif.worker.js",
// transparent: "#fff",
// background: '#ffffff',
});
gif.on("finished",function(blob){
console.log(URL.createObjectURL(blob));
var file = new FileReader();
file.readAsDataURL(blob);
file.onload = function(){
document.getElementById("result").setAttribute("src", file.result)
}
})
var imgList = [
'./images/pic1.png',
'./images/pic2.png',
'./images/pic3.png',
];
var imgObjList = [],count = 0;
for (let i=0; i<imgList.length; i++){
var tmpImg = new Image();
imgObjList.push(tmpImg);
tmpImg.src = imgList[i];
tmpImg.onload = function () {
count++;
if (count === imgList.length ){
generateGif(imgObjList);
}
}
}
function generateGif(imgObjList) {
for (let i=0;i<imgObjList.length;i++){
ctx.save();
ctx.drawImage(oImg,50,100,220,220);
ctx.drawImage(imgObjList[i],0,0,canvas.width,canvas.height);
ctx.restore();
gif.addFrame(canvas,{copy:true,delay:300})
ctx.clearRect(0,0,canvas.width,canvas.height)
}
gif.render();
}
}
</script>
</html>
-
效果
效果图
最后
页面写的有些粗糙...，因为借助gif.js实现起来确实很容易。
