capturando salida de lienzo html5 como secuencia de video o swf o png?

Question

Necesito tomar salida de canvas HTML5 como secuencia de video o swf png.

Encontré el siguiente enlace en stackoverflow para capturar imágenes.
Capture HTML Canvas as gif/jpg/png/pdf?

¿Alguien puede sugerir si queremos que la salida sea de video o swf de secuencia png?

EDIT:

Ok ahora entendía cómo capturar los datos de lona para almacenar en el servidor, lo probé y se está trabajando muy bien si uso sólo las formas, rectángulo o algún otro gráfico, pero no si dibujo imágenes externas en el elemento de lona. ¿Alguien me puede decir cómo capturar datos de lienzo por completo ya sea que usemos imágenes gráficas o externas para dibujar en lienzo?

He utilizado el siguiente código:

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"); 
} 

después de tomar los datos de la lona en mi "datos" variable de creé un nuevo lienzo y dibujar los datos capturados en eso, el rectángulo rojo dibujado en la segunda tela, sino esa imagen externa no.

Gracias de antemano.

Answer 1

que sugeriría:

1. Uso setInterval para capturar el contenido de su lienzo como una dirección URL de datos 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. Envíe todos estos PNG DataURL a su servidor. Será una gran pila de datos.

3. Usando cualquier lenguaje de servidor te gusta (PHP, Ruby, Python) tira de las cabeceras de las direcciones URL de datos de manera que lo que queda es PNG simplemente los base64

4. utilizando un lenguaje que sea del lado del servidor que como, convertir los datos de base64 a binarios y escribir archivos temporales.

5. Utilizando la biblioteca de terceros que desee en el servidor, convierta la secuencia de archivos PNG en un video.

Editar: En cuanto a su comentario de las imágenes externas, no se puede crear una URL datos de una tela que no es origin-clean. Tan pronto como use drawImage() con una imagen externa, su lienzo estará contaminado. A partir de este enlace:

Todos los elementos de lona deben comenzar con su origen -limpia establece en true. La bandera se debe establecer en falso si cualquiera de las siguientes acciones:

[...]

método de contexto 2D del elemento drawImage() se llama con un HTMLImageElement o un HTMLVideoElement cuyo origen no es lo mismo que la del objeto Document que posee el elemento canvas.

[...]

Siempre que el método de un elemento canvas cuyo origen limpia-bandera se establece en false se llama toDataURL(), el método debe plantear una excepción SECURITY_ERR.

Cuando el método getImageData() del contexto 2D de un elemento de lienzo cuyo indicador de limpieza de origen se establece en falso se llama con argumentos correctos, el método debe generar una excepción SECURITY_ERR.

Answer 2

Para empezar, desea capturar los datos de píxeles del lienzo en un intervalo regular (utilizando temporizadores de JavaScript probablemente). Puede hacerlo llamando a context.getImageData en el contexto del lienzo. Eso creará una serie de imágenes que puede convertir en una transmisión de video.

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