上次介绍了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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="gif.js"></script>
</head>
<body>
<canvas width="480" height="480" id="canvas">
</canvas><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1.png" id="img">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="" id="result">
</body>
<script>
window. = 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. = 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. = 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实现起来确实很容易。
参考
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦