Экспорт HTML5-анимации Canvas в формате .GIF - PullRequest
Новая
       32

Экспорт HTML5-анимации Canvas в формате .GIF

0 голосов
/ 02 июня 2019

Я пытаюсь экспортировать и загружать анимации холста реакций из Facebook с максимально возможным качеством .GIF-анимации с прозрачным или белым фоном, используя библиотеку jsgif - https://github.com/antimatter15/jsgif

Я ввожу LZWEncoder.js, NeuQuant.js, GIFEncoder.js и b64.js содержимое в консоль разработчика, а затем пошагово вводит код js, описанный в документации jsgif, при наведении курсора на кнопку Like, чтобы активизировать реакции в 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

...