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

Question

Мне нужно взять вывод холста HTML5 в качестве последовательности видео или SWF PNG.

Я нашел следующую ссылку в 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");
}

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

Заранее спасибо.

Answer 1

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

1. Используйте setInterval для захвата содержимого вашего Canvas в виде 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 );
   

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

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

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

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

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

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

[...]

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

[...]

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

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

Answer 2

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

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