Canvas合成自定义Gif图

最新推荐文章于 2024-08-02 14:17:59 发布

weixin_33936401

最新推荐文章于 2024-08-02 14:17:59 发布

阅读量1.3k

点赞数

文章标签： python

原文链接：https://yq.aliyun.com/articles/667065

版权

上次介绍了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实现起来确实很容易。

参考

weixin_33936401

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas合成自定义Gif图

上次介绍了Canvas自定义图片大小及蒙版与生成gif图，没有详细的说明如何生成gif图，生成gif图的过程也可以进行一些优化。我们无需借助第三方库，直接使用canvas原生的api就可以完成很多的功能。效果这里只是说明功能，细节上还未仔细调，清楚了核心部分其余边边角角处理起来会很快。比较丑...
复制链接

扫一扫