继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Canvas合成自定义Gif图

艾贺521
关注TA
已关注
手记 292
粉丝 1.1万
获赞 1544

上次介绍了Canvas自定义图片大小及蒙版与生成gif图,没有详细的说明如何生成gif图,生成gif图的过程也可以进行一些优化。

我们无需借助第三方库,直接使用canvas原生的api就可以完成很多的功能。

效果

这里只是说明功能,细节上还未仔细调,清楚了核心部分其余边边角角处理起来会很快。


240

比较丑的效果

过程

  1. 准备素材

  1. 页面

<!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. = 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>
  1. 效果


    480

    效果图

最后

页面写的有些粗糙...,因为借助gif.js实现起来确实很容易。

参考

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP