capturer la sortie de canvas html5 comme séquence vidéo ou swf ou png?

J'ai besoin de prendre HTML5 canvas de sortie vidéo ou d'un fichier swf png séquence.

J'ai trouvé le lien suivant sur stackoverflow pour la capture d'images.
Capture Canvas HTML gif/jpg/png/pdf?

Mais quelqu'un peut-il suggérer si nous voulons que la sortie de la vidéo ou d'un fichier swf de séquence png?

EDIT:

Ok maintenant j'ai compris comment faire pour capturer le canevas de données à stocker sur le serveur, je l'ai essayé et il fonctionne très bien si je n'utilise que des formes, un rectangle ou un autre graphique, mais pas si je dessine des images externes sur l'élément canvas.
Quelqu'un peut me dire comment faire pour capturer toile complètement les données que nous utilisons des graphiques ou des images externes pour le dessin sur la toile?

J'ai utilisé le code suivant:

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

après la prise de la toile données dans mes "données" de la variable, j'ai créé une nouvelle toile et en tirer les données saisies sur ce, le rectangle rouge dessiné sur la deuxième toile, mais que l'image externe qui ne fonctionne pas.

Merci d'avance.

source d'informationauteur Bhupi

  1. 17

    Je dirais:

    1. Utilisation setInterval de capturer le contenu de votre espace de travail comme un PNG de données d'URL.

      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. Envoyer tous ces PNG DataURLs à votre serveur. Ça va être un très gros tas de données.

    3. Utilisant n'importe quel langage côté serveur (PHP, Ruby, Python) bande les en-têtes de données Url, de sorte que vous êtes de gauche avec juste le base64 Png

    4. Utilisant n'importe quel langage côté serveur vous le souhaitez, de les convertir en base64 de données binaires et d'écrire des fichiers temporaires.

    5. À l'aide de quelque 3ème partie de la bibliothèque que vous voulez sur le serveur, convertir la séquence de fichiers PNG à une vidéo.

    Modifier: en ce qui Concerne votre commentaire d'images externes, vous ne pouvez pas créer une base de données d'URL à partir d'une toile qui n'est pas origine-clean. Dès que vous utilisez drawImage() avec une image externe, votre toile est entachée. À partir de ce lien:

    Tous les éléments de canevas doit commencer par leur origine-propre définie sur true.
    Le drapeau doit être défini à false si l'une des actions suivantes se produisent:

    [...]

    L'élément du contexte 2D du drawImage() méthode est appelée avec un HTMLImageElement ou un HTMLVideoElement dont l'origine n'est pas le même que celui de l'objet Document qui est propriétaire de l'élément canvas.

    [...]

    Chaque fois que le toDataURL() la méthode de l'élément canvas dont l'origine nettoyer indicateur est défini sur false est appelée, la méthode doit soulever un SECURITY_ERR exception.

    Chaque fois que le getImageData() méthode de la 2D contexte d'une toile élément dont l'origine nettoyer indicateur est défini sur false est appelé avec des arguments corrects, la méthode doit soulever un SECURITY_ERR exception.

  2. 2

    Pour commencer, vous voulez capturer les données de pixel à partir de la toile sur un intervalle régulier (à l'aide de JavaScript minuteries probablement). Vous pouvez le faire en appelant le contexte.getImageData sur la toile. Qui va créer une série d'images que vous pouvez transformer en un flux vidéo.

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