Захват вывода html5 canvas как видео или swf или последовательность png?

Мне нужно взять HTML5 canvas output в виде видео или SWF-последовательности.

Я нашел следующую ссылку на stackoverflow для захвата изображений.
Захват HTML-холста как gif/jpg/png/pdf?

Но может ли кто-нибудь предложить, хотим ли мы, чтобы результат был видео или swf последовательности png?

EDIT:

Теперь я понял, как захватить данные холста для хранения на сервере, я попробовал его, и он отлично работает, если я использую только фигуры, прямоугольники или другие графические элементы, но не рисую внешние изображения на элементе холста. Может ли кто-нибудь сказать мне, как полностью фиксировать данные холста, используем ли мы графические или внешние изображения для рисования на холсте?

Я использовал следующий код:

var cnv = document.getElementById("myCanvas");
var ctx = cnv.getContext("2d");

if(ctx)
{
  var img = new Image();

  ctx.fillStyle = "rgba(255,0,0,0.5)";
  ctx.fillRect(0,0,300,300);
  ctx.fill();

  img.onload = function()
  {
     ctx.drawImage(img, 0,0);
  }

  img.src = "my external image path";

  var data = cnv.toDataURL("image/png");
}

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

Спасибо заранее.

Ответы

Ответ 1

Я бы предложил:

  • Используйте setInterval для захвата содержимого вашего холста в качестве URL-адреса данных PNG.

    function PNGSequence( canvas ){
  this.canvas = canvas;
  this.sequence = [];
};
PNGSequence.prototype.capture = function( fps ){
  var cap = this;
  this.sequence.length=0;
  this.timer = setInterval(function(){
    cap.sequence.push( cap.canvas.toDataURL() );
  },1000/fps);
};
PNGSequence.prototype.stop = function(){
  if (this.timer) clearInterval(this.timer);
  delete this.timer;
  return this.sequence;
};

var myCanvas = document.getElementById('my-canvas-id');
var recorder = new PNGSequence( myCanvas );
recorder.capture(15);

// Record 5 seconds
setTimeout(function(){
  var thePNGDataURLs = recorder.stop();
}, 5000 );

  • Отправьте все эти PNG DataURL на ваш сервер. Это будет очень большая куча данных.

  • Используя любой серверный язык, который вам нравится (PHP, Ruby, Python), удаляйте заголовки с URL-адресов данных, чтобы вы оставались только с PNG с кодировкой base64

  • Используя любой серверный язык, который вам нравится, преобразуйте данные base64 в двоичный файл и запишите временные файлы.

  • Используя любую стороннюю библиотеку, которая вам нравится на сервере, преобразуйте последовательность PNG файлов в видео.

Изменить. Что касается комментариев внешних изображений, вы не можете создать URL-адрес данных с холста, который не является origin-clean. Как только вы используете drawImage() с внешним изображением, ваш холст испорчен. По этой ссылке:

Все элементы холста должны начинаться с того, что их исходный-чистый набор равен true. Флаг должен быть установлен в false, если происходит одно из следующих действий:

[...]

Метод 2D-контекста drawImage() вызывается с HTMLImageElement или HTMLVideoElement, происхождение которого не совпадает с именем объекта Document, которому принадлежит элемент холста.

[...]

Всякий раз, когда вызывается метод toDataURL() элемента canvas, флаг флага которого установлен на значение false, метод должен вызывать исключение SECURITY_ERR.

Всякий раз, когда метод getImageData() для 2D-контекста элемента canvas, флаг начала координат которого установлен в false, вызывается с другими правильными аргументами, метод должен поднимать исключение SECURITY_ERR.

Ответ 2

Чтобы начать, вы хотите захватить данные пикселя с холста на регулярном интервале (вероятно, с помощью JavaScript-таймеров). Вы можете сделать это, вызвав context.getImageData в контексте холста. Это создаст серию изображений, которые вы можете превратить в видеопоток.

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#pixel-manipulation