最近在在研究svg转png，png又想在转gif，这下就好玩了，看了好多文章，也尝试过几种方案，可是都没成功，最后看了生成的gif为什么没有动起来，原因大概有几个，一个是参数赋值同一个，img还没加载完，循环就结束了。
看下原先网上比较多的代码：
如果我们引入相关文件，并且复制以上代码，你会发现好多报错的。
来一个个看下，gif是通过一帧帧图片动起来形成的，我们是通过生成一张canvas画布不断赋值，然后通过gif.js插件生成。上面截图的应该是前面传入图片src数组，然后生成img。上面这串代码，问题就在于我图片还没加载完，你循环估摸着早结束了。
我们这边简单做了下演示，首先我加载夹需要的图片:
divclass=containerimgid=imgsrc=imgclass=real-mapsrc=./x_1.pngimgclass=real-mapsrc=./x_2.pngimgclass=real-mapsrc=./x_3.pngimgclass=real-mapsrc=./x_4.pngimgclass=real-mapsrc=./x_5.pngimgclass=real-mapsrc=./x_6.pngimgclass=real-mapsrc=./x_7.pngimgclass=real-mapsrc=./x_8.pngimgclass=real-mapsrc=./x_9.pngimgclass=real-mapsrc=./x_10.png/div
当然你前提要引用：
scriptsrc=gif.js/script
然后js代码：
script//要转换为图片的dom对象varelement=document.querySelectorAll(.real-map);vargif=newGIF({workers:2,quality:10,workerScript:gif.worker.js});varj=0;varcanvas=document.createElement(canvas);varctx=canvas.getContext(2d);varlen=element.length;varwidth=;varheight=;varrun=function(){varimg=element[j];//Canvas绘制图片canvas.width=width;canvas.height=height;console.log(width,height);//铺底色ctx.fillStyle=#fff;ctx.fillRect(0,0,canvas.width,canvas.height);ctx.drawImage(img,0,0,width,height);gif.addFrame(canvas,{copy:true,delay:});j++;//图片if(j=len){gif.render();return;}run();};run();gif.on(finished,function(blob){//生成图片链接varurl=URL.createObjectURL(blob);console.log(url);document.getElementById(img).setAttribute(src,url);});/script
如果你按照我这个实例试试的话，恭喜你应该已经生成了，当然还有很多优化的方案，来让我们的gif生成更流畅，你不妨在研究研究，也可评论交流一下~