js如何实现多张图片生成gif动画?
网友回复
使用gif.js
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <h1>待合成gif的四张图</h1> <div class="images"> <img id="img1" src="/asset/logo.png" /> <img id="img2" src="/asset/startBt.jpg" /> <img id="img3" src="/asset/yanzhengma.png" /> </div> <h1>合成后</h1> <div> <img id="gifresult" /> </div> <script type="text/javascript" src="/asset/gif.js"></script> <script type="text/javascript"> // console.log(gifs); var gifs = new GIF({ workers: 2, quality: 10, workerScript: '../asset/gif.worker.js', width:200, height:200 }); // add a image element // console.log(gifs); var img1 = document.querySelector('#img1'); var img2 = document.querySelector('#img2'); var img3 = document.querySelector('#img3'); gifs.addFrame(img1, { delay: 500 }); gifs.addFrame(img2, { delay: 500 }); gifs.addFrame(img3, { delay: 500 }); // or a canvas element // gif.addFrame(canvasElement, { // delay: 200 // }); // or copy the pixels from a canvas context // gif.addFrame(ctx, { // copy: true // }); console.log(gifs); gifs.on('finished', function(blob) { console.log("dddd"); document.querySelector('#gifresult').src=URL.createObjectURL(blob); ///window.open(URL.createObjectURL(blob)); // var el = document.createElement('a'); // el.href = URL.createObjectURL(blob); // el.download = 'demo-name'; //设置下载文件名称 // document.body.appendChild(el); // var evt = document.createEvent("MouseEvents"); // evt.initEvent("click", false, false); // el.dispatchEvent(evt); // document.body.removeChild(el); }); gifs.render(); console.log(gifs); </script> </body> </html>