У меня есть решение, но оно зависит от того, знакомы ли вы с Javascript Console в Firefox (установите плагин Firebug ), Chrome или Safari.
Если это не так, зайдите в Google или попробуйте щелкнуть правой кнопкой мыши в любом месте страницы, выберите « Проверка элемента » и найдите « Консоль »....
Что делает код:
Позволяет снимать 10 скриншотов элемента CANVAS каждую 1/10 секунды.Оба эти значения легко изменить, так как вы можете настроить количество итераций, которое вы хотите получить.В приведенном вами примере идентификатор элемента canvas равен ' mycanvas '.
После того, как экран получен, он выводит изображения на страницу.На этом этапе вы можете сохранить отдельные изображения.
Выполнение кода
Вставьте следующий код в Javascript Console :
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 , или другое приложение.
Side Note
Если по какой-то причине вам нужно вывести как 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: 
Так что это что-то,но не то, что вам нужно ...