Захват каждого кадра холста HTML5

У меня есть решение, но оно зависит от того, знакомы ли вы с консолью Javascript в Firefox (установите плагин Firebug ), Chrome или Safari. .

Если это не так, погуглите или попробуйте просто щелкнуть правой кнопкой мыши в любом месте страницы, выберите « Проверить элемент » и найдите « Консоль » ...

Что делает код:

Он позволяет делать 10 снимков экрана элемента CANVAS каждые 1/10 секунды. Оба эти значения легко изменить, так как вы можете настроить, чтобы найти количество итераций, которое вы хотите получить. В приведенном вами примере идентификатор элемента холста - « mycanvas ».

После захвата экрана он выводит изображения на страницу. На этом этапе вы можете сохранить отдельные изображения.

Выполнение кода

Вставьте следующий код в консоль Javascript :

var canvas = document.getElementById("mycanvas");
var shots  = [];
var grabLimit = 10;  // Number of screenshots to take
var grabRate  = 100; // Miliseconds. 500 = half a second

var count     = 0;

function showResults() {
    //console.log(shots);
    for (var i=0; i<shots.length; i++) {
      document.write('<img src="' + shots[i] + '"/>\n');
    }
}

var grabber = setInterval(function(){
  count++;

  if (count>grabLimit) {
    clearInterval(grabber);
    showResults();
  }

  var img     = canvas.toDataURL("image/png");
  shots.push(img);
}, grabRate);

и нажмите CTRL-Enter , чтобы выполнить его.

Запуск должен занять несколько секунд, так что проявите терпение.

После этого у вас должны быть все необходимые кадры (а может и больше) для создания анимированного GIF с помощью ImageMagick, этого веб-сайта MakeAGif.com или другого приложения.

Боковое примечание

Если по какой-то причине вам нужно вывести как GIF из JPG, а не PNG, просто обновите, если необходимо, это:

var img     = canvas.toDataURL("image/png");

до одного из следующих:

var img     = canvas.toDataURL("image/gif");
var img     = canvas.toDataURL("image/jpg");

Поддержка вывода как gif или jpg могут быть не во всех браузерах (должно быть в большинстве).

(БОЛЬШОЕ) ОБНОВЛЕНИЕ №1

Во-первых, я сохраняю приведенный выше код в неизменном виде, а не обновляю его, потому что оба подхода могут быть полезны другим.

Во-вторых, этот новый код НЕ РЕШАЕТ проблему. В этом есть один серьезный недостаток. Он создает анимированный GIF ( Yipee! ), но его различные оттенки зеленого ( Boooo! ). Не уверен, как / почему, но, может быть, кто-то сможет взять это отсюда и посмотреть, что я пропустил.

Итак, поехали ... применяются те же правила - скопируйте и вставьте его в консоль Javascript браузера (он тормозит в Firefox, но Google Chrome работает довольно быстро ... 10 секунд или около того, чтобы запустить).

var jsf  = ["/Demos/b64.js", "LZWEncoder.js", "NeuQuant.js", "GIFEncoder.js"];
var head = document.getElementsByTagName("head")[0];

for (var i=0;i<jsf.length;i++) {
  var newJS = document.createElement('script');
  newJS.type = 'text/javascript';
  newJS.src = 'http://github.com/antimatter15/jsgif/raw/master/' + jsf[i];
  head.appendChild(newJS);
}

// This post was very helpful!
// http://antimatter15.com/wp/2010/07/javascript-to-animated-gif/

var w = setTimeout(function() { // give external JS 1 second of time to load

    console.log('Starting');

    var canvas = document.getElementById("mycanvas");
    var context = canvas.getContext('2d');
    var shots  = [];
    var grabLimit = 10;  // Number of screenshots to take
    var grabRate  = 100; // Miliseconds. 500 = half a second
    var count     = 0;

    function showResults() {
        console.log('Finishing');
        encoder.finish();
        var binary_gif = encoder.stream().getData();
        var data_url = 'data:image/gif;base64,'+encode64(binary_gif);
        document.write('<img src="' +data_url + '"/>\n');
    }

    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();

    var grabber = setInterval(function(){
      console.log('Grabbing '+count);
      count++;

      if (count>grabLimit) {
        clearInterval(grabber);
        showResults();
      }

      var imdata = context.getImageData(0,0,canvas.width,canvas.height);
      encoder.addFrame(context);

    }, grabRate);

}, 1000);

Он использует некоторый полезный код, указатели и файлы JS, упомянутые в этом сообщении в блоге JavaScript в (Анимированный) GIF . Я использую некоторые файлы JS напрямую, но вы должны скопировать их локально, если собираетесь использовать их много.

На выходе я получил этот GIF:

Значит, это кое-что, но не то, что вам нужно ...