canvas 画布动态效果转换为gif

最新推荐文章于 2024-08-09 07:13:32 发布

初识这世间万般留恋

最新推荐文章于 2024-08-09 07:13:32 发布

阅读量4.6k

点赞数

分类专栏： canvas javascript 文章标签： javascript

本文链接：https://blog.csdn.net/a1044187112/article/details/105429909

版权

javascript 同时被 2 个专栏收录

25 篇文章

订阅专栏

canvas

2 篇文章

订阅专栏

canvas + gif.js 将canvas 转换为gif

gif的github 地址需要的文件在 dist目录下 gif.js 和 gif.worker.js

在页面引入gif.js

Name	Default	Description
repeat	`0`	gif 是否重复播放 0 为重复 -1 不重复
quality	`10`	像素采样间隔，越低越好
workers	`2`	工作者数量
workerScript	`gif.worker.js`	从以下网址加载工作程序脚本的网址
background	`#fff`	源图像透明的背景色
width	`null`	输出图像宽度
height	`null`	输出图像高度
transparent	`null`	透明的十六进制颜色，`0x00FF00`=绿色
dither	`false`	抖动方法，例如 `FloydSteinberg-serpentine` 可用的抖动方法是： `FloydSteinberg` `FalseFloydSteinberg` `Stucki` `Atkinson`
debug	`false`	是否将调试信息打印到控制台

addFrame options

Name	Default	Description
delay	`500`	每一帧的切换时间
copy	`false`	copy the pixel data
dispose	`-1`	frame disposal code. See GIF89a Spec

<canvas width="200" height="200" id="canvas"></canvas>    //画布对象
<img src="aa/load2.png" id="img"> // gif第一针
<img src="" id="result"> // 返回的结果 格式为gif

 window.onload = function () {
        var oImg = document.getElementById("img");
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d')

        let gif = new GIF({  // 创建gif对象
			repeat:0,
            workers: 4,
            quality: 30,
            workerScript: "js/gif.worker.js",
            transparent: "#fff",
            // background: 'rgba(0,0,0,0)',
        });
        gif.on("finished",function(blob){ // 渲染完毕 
              // URL.createObjectURL(blob); 将blob转换为可访问的url
            var file = new FileReader();
            file.readAsDataURL(blob);
            file.onload = function(){
                document.getElementById("result").setAttribute("src", file.result)
            }

        })
        var imgList = [];
		for (var i = 0; i < 89; i++) { // 图片帧序列    
			imgList.push( './aa/load'+(i+2)+'.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,0,0,200,200);
                ctx.drawImage(imgObjList[i],0,0,canvas.width,canvas.height);
                ctx.restore();
                gif.addFrame(canvas,{copy:true,delay:1000/30})
                ctx.clearRect(0,0,canvas.width,canvas.height)
            }
            gif.render();
        }

    }