acquisendo l'output canvas html5 come sequenza video o swf o png?

Question

Ho bisogno di prendere l'output canvas HTML5 come sequenza di video o swf png.

Ho trovato il seguente link sullo stackoverflow per l'acquisizione di immagini.
Capture HTML Canvas as gif/jpg/png/pdf?

Ma qualcuno può suggerire se vogliamo che l'output sia video o swf di sequenza png?

EDIT:

Ok ora ho capito come catturare i dati di tela per archiviare sul server di, ho provato e si sta lavorando bene, se io uso solo le forme, rettangolo o di qualche altra grafica, ma non se ne traggo immagini esterne su elemento canvas. Qualcuno può dirmi come acquisire completamente i dati sul canvas, sia che utilizziamo immagini grafiche o esterne per disegnare su tela?

ho usato il seguente codice:

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

dopo aver preso i dati di tela nella mia variabile "dati" Ho creato una nuova tela e disegnare i dati acquisiti su questo, il rettangolo rosso disegnato sulla seconda tela, ma quell'immagine esterna no.

Grazie in anticipo.

Answer 1

vorrei suggerire:

1. Usa setInterval per catturare il contenuto della tela come un URL di dati 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. Inviare tutti questi PNG DataURL al server. Sarà una grande quantità di dati.

3. utilizzando qualsiasi linguaggio server-side che ti piace (PHP, Ruby, Python) striscia intestazioni dagli URL di dati in modo che si sono lasciati con PNG solo i Base64

4. usando un linguaggio qualunque lato server si come, convertire i dati base64 in binari e scrivere i file temporanei.

5. Utilizzando qualsiasi libreria di terze parti che si desidera sul server, convertire la sequenza di file PNG in un video.

Edit: Per quanto riguarda il commento di immagini esterne, non è possibile creare un URL di dati da una tela che non è origin-clean. Non appena usi drawImage() con un'immagine esterna, la tua tela è contaminata. Da quel link:

Tutti gli elementi di tela devono iniziare con la loro origine pulire impostata su true. Il flag deve essere impostato su falso se una delle seguenti azioni:

[...]

metodo di contesto 2D dell'elemento drawImage() viene richiamata con un HTMLImageElement o un HTMLVideoElement cui origine non è la stessa quello dell'oggetto Document che possiede l'elemento canvas.

[...]

Ogni volta che il metodo di un elemento canvas cui origine pulire flag è impostato su false è chiamato toDataURL(), il metodo deve sollevare un'eccezione SECURITY_ERR.

Ogniqualvolta il metodo getImageData() del contesto 2D di un elemento canvas il cui flag origine-clean è impostato su false viene chiamato con argomenti altrimenti corretti, il metodo deve generare un'eccezione SECURITY_ERR.

Answer 2

Per iniziare, si desidera acquisire i dati dei pixel dalla tela su un intervallo regolare (utilizzando probabilmente i timer JavaScript). Puoi farlo chiamando context.getImageData sul contesto del canvas. Ciò creerà una serie di immagini che è possibile trasformare in un flusso video.

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