将HTML5 Canvas动画导出为.GIF动画

时间:2019-06-02 09:41:00

标签: html5-canvas gif animated-gif

我正在尝试使用jsgif库-https://github.com/antimatter15/jsgif

从Facebook导出和下载反应画布动画,以尽可能高的质量.GIF动画具有透明或白色背景。

我要将LZWEncoder.jsNeuQuant.jsGIFEncoder.jsb64.js内容注入开发人员控制台,然后逐步注入jsgif文档中描述的js代码同时将鼠标悬停在“赞”按钮上,以使响应在DOM中处于活动状态。

var canvas = document.querySelector("#globalContainer > div._1oxj.uiLayer > div > div > div._iu-._628b._1ef3 > span._iuw._iuy > div > div > div._1ef0 > canvas");
var context = canvas.getContext('2d');
context.fillStyle = 'rgb(255,255,255)';
context.fillRect(0,0,canvas.width, canvas.height); //GIF can't do transparent so do white

context.fillStyle = "rgb(200,0,0)";  
context.fillRect (10, 10, 75, 50);   //draw a little red box

然后

  var encoder = new GIFEncoder();

然后

  encoder.setRepeat(0); //0  -> loop forever
                        //1+ -> loop n times then stop
  encoder.setDelay(500); //go to next frame every n milliseconds

然后

  encoder.start();

然后

  encoder.addFrame(context);

然后

  encoder.finish();
  encoder.download("download.gif");

我希望下载的图像具有高质量的.GIF动画循环,但是我得到的只是一张没有动画的清晰的.GIF图像:https://i.ibb.co/XWxZXfB/download.gif

0 个答案:

没有答案