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

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

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

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

РЕДАКТИРОВАТЬ:

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

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

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" я создал новый холст и нарисовал на нем захваченные данные, красный прямоугольник нарисован на втором холсте, а это внешнее изображение - нет.

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

Источник

2 ответа

Решение

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

  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 данных из холста, который не является чистым от источника. Как только вы используете drawImage() с внешним изображением ваш холст испорчен. По этой ссылке:

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

[...]

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

[...]

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

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

Источник

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

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

Источник
Другие вопросы по тегам