上次介紹了Canvas自定義圖片大小及蒙版與生成gif圖，沒有詳細的說明如何生成gif圖，生成gif圖的過程也可以進行一些優(yōu)化缨该。
我們無需借助第三方庫似嗤，直接使用canvas原生的api就可以完成很多的功能。
效果
這里只是說明功能泉褐，細節(jié)上還未仔細調(diào)赐写，清楚了核心部分其余邊邊角角處理起來會很快。
比較丑的效果
過程
- 準備素材
- 一個頭像膜赃，如何獲取頭像挺邀，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實現(xiàn)起來確實很容易端铛。
