Greifen jedem frame eine HTML5-canvas

Ich habe eine Lösung, aber es ist von Ihnen abhängig sind vertraut mit der Javascript-Konsole in Firefox (installieren Sie die Firebug plugin), Chrome oder Safari.

Falls du es nicht bist, google es, oder versuchen Sie nur rechts klicken Sie irgendwo auf die Seite, wählen Sie "Element Untersuchen" und suchen Sie nach "Konsole"...

, Was der code tut:

So nehmen Sie 10 Bildschirm-Greifer die CANVAS element jedes 1/10tel einer Sekunde. Diese beiden Werte sind leicht modifiziert, da kann man sich zwicken, um zu finden, die Anzahl der Iterationen, die Sie möchten zu bekommen. Für das Beispiel, das Sie geben, das canvas-element-ID 'mycanvas'.

Einmal hat es die Bildschirm-Greifer gibt es die Bilder in die Seite. An diesem Punkt können Sie die einzelnen Bilder.

Der code ausgeführt wird

Fügen Sie den folgenden code in das Javascript-Konsole:

var canvas = document.getElementById("mycanvas");
var shots  = [];
var grabLimit = 10;  //Number of screenshots to take
var grabRate  = 100; //Miliseconds. 500 = half a second

var count     = 0;

function showResults() {
    //console.log(shots);
    for (var i=0; i<shots.length; i++) {
      document.write('<img src="' + shots[i] + '"/>\n');
    }
}

var grabber = setInterval(function(){
  count++;

  if (count>grabLimit) {
    clearInterval(grabber);
    showResults();
  }

  var img     = canvas.toDataURL("image/png");
  shots.push(img);
}, grabRate);

und drücken Sie STRG-Enter, um es auszuführen.

Sollte es dauern, ein paar Sekunden zu laufen, so seien Sie bitte geduldig.

Danach sollten Sie alle notwendigen frames (vielleicht mehr) zur Erstellung eines animierten GIF mittels ImageMagick, diese website MakeAGif.com oder andere app.

Seite Hinweis

Wenn aus irgendeinem Grund Sie benötigen, um die Ausgabe als GIF-JPG anstelle von PNG einfach zu aktualisieren, wie erforderlich, ist dies:

var img     = canvas.toDataURL("image/png");

einer dieser:

var img     = canvas.toDataURL("image/gif");
var img     = canvas.toDataURL("image/jpg");

Unterstützung für die Ausgabe gif oder jpg möglicherweise nicht in allen Browsern (sollten).

(GROßEN) UPDATE #1

Erste, ich halte den code oben intakt, anstatt zu aktualisieren, da beide Ansätze könnten hilfreich sein für andere.

Zweiten, dieser neue code löst das problem NICHT. Es Art von macht, aber auch einen großen Nachteil. Es erzeugt ein animiertes GIF (Yipee!) aber seine in verschiedenen Schattierungen von grün (Boooo!). Nicht sicher, wie/warum, aber vielleicht kann jemand nehmen Sie es von hier und sehen, was ich verpasst habe.

So, hier gehen wir... dieselben Regeln anwenden - kopieren und füge es in die Javascript-Konsole des Browsers (es laggt in Firefox, sondern Google Chrome ziemlich schnell... 10 Sekunden oder so laufen).

var jsf  = ["/Demos/b64.js", "LZWEncoder.js", "NeuQuant.js", "GIFEncoder.js"];
var head = document.getElementsByTagName("head")[0];

for (var i=0;i<jsf.length;i++) {
  var newJS = document.createElement('script');
  newJS.type = 'text/javascript';
  newJS.src = 'http://github.com/antimatter15/jsgif/raw/master/' + jsf[i];
  head.appendChild(newJS);
}

//This post was very helpful!
//http://antimatter15.com/wp/2010/07/javascript-to-animated-gif/

var w = setTimeout(function() { //give external JS 1 second of time to load

    console.log('Starting');

    var canvas = document.getElementById("mycanvas");
    var context = canvas.getContext('2d');
    var shots  = [];
    var grabLimit = 10;  //Number of screenshots to take
    var grabRate  = 100; //Miliseconds. 500 = half a second
    var count     = 0;

    function showResults() {
        console.log('Finishing');
        encoder.finish();
        var binary_gif = encoder.stream().getData();
        var data_url = 'data:image/gif;base64,'+encode64(binary_gif);
        document.write('<img src="' +data_url + '"/>\n');
    }

    var encoder = new GIFEncoder();
    encoder.setRepeat(0);  //0  -> loop forever, 1+ -> loop n times then stop
    encoder.setDelay(500); //go to next frame every n milliseconds
    encoder.start();

    var grabber = setInterval(function(){
      console.log('Grabbing '+count);
      count++;

      if (count>grabLimit) {
        clearInterval(grabber);
        showResults();
      }

      var imdata = context.getImageData(0,0,canvas.width,canvas.height);
      encoder.addFrame(context);

    }, grabRate);

}, 1000);

Verwendet es einige hilfreiche code -, Zeiger-und JS-Dateien verwiesen, die in diesem blog-post JavaScript (Animierte) GIF. Ich benutze einige JS-Dateien direkt, aber Sie sollten kopieren Sie diese lokal, wenn du gehst, es zu benutzen viele.

Die Ausgabe war für mich dieses GIF:

So etwas, aber nicht das, was Sie brauchen...

Nahm ich einen Blick auf den code, und es scheint, wie es sollte möglich sein, mit ein wenig hacking.

Suchen Sie in der Liste der Zyklus-Objekte in der Palette.Zyklen, Sie sollten in der Lage sein, um herauszufinden, die Zyklus Länge jedes Zyklus mit dem Zyklus.hohe, Zyklus.niedrig und Zyklus.beurteilen Sie, Felder. Das heißt, Sie müssen einen anderen Algorithmus für jede der sechs möglichen Werte für Zyklus.reverse.

Sobald Sie wissen, die Länge eines jeden Zyklus in der Liste (in Millisekunden) wenn ich bin das Lesen der code korrekt), finden Sie das kleinste gemeinsame Vielfache aller Zyklus-Längen, die würde Ihnen sagen, die Gesamtlänge der animation. In der Praxis, obwohl, werden Sie wollen, um zu Stock-teilen Sie Sie durch Ihr Beispiel-Zeitraum zunächst (sagen wir 100 Millisekunden für zehn Bildern pro Sekunde), um eine untere gemeinsame Vielfache.

Dann manipulieren die animate-Funktion in main.js nehmen tickCount-parameter und pass, die in der palette.Zyklus, anstatt alles auf Basis Echtzeit. Erhöhen Sie die Anzahl der Teilstriche, die durch Ihre sample-Periode mit jeder iteration.

Von dort aus sollten Sie in der Lage, zum ändern der Bitmap-Klasse render-Methode, indem die erforderliche Logik zum Auslesen der Leinwand in eine Datei. Es gibt Bibliotheken, die die Verwaltung das Letzte bisschen für Sie. Ich würde empfehlen das speichern der Dateien mit der tick-count als den Namen der Datei (mit genug führende Nullen halten Sie in Ordnung.) Nähte alle Bilder zusammen in eine animierte GIF möglich sein könnte, ausführen als batch-job mit der richtigen software.

Natürlich, ich habe nicht wirklich versucht, diese. Sie möchten in Prüfungen, zum Beispiel, um sicherzustellen, dass Sie nicht stolpern, eine animation, mit einer epischen Länge des Entwicklungszyklus und der Schöpfung Millionen von Bildern auf Ihrer Festplatte.

Als ein beiseite, du könntest auch mit ein wenig mehr Arbeit, herauszufinden, die genaue Zeit bis zum nächsten update und nehmen unregelmäßige Proben, aber würden Sie haben, um herauszufinden, wie zu speichern, dass eine Verzögerung von Informationen, so dass Sie können es verwenden, zu montieren die abgeschlossen GIF.

Versuchen PhantomJS

Dieses script speichert 100 Bilder.

var webPage = require('webpage');
var fs = require('fs');
var page = webPage.create();

var NB_FRAME = 100;
var current = 0;

page.open('http://www.effectgames.com/demos/canvascycle/?sound=0',
function(status) {
  if (status === "success") {
     var current = 0;
     var grabber = setInterval(function () {
      var frame = page.evaluate(function() {
       return document.getElementById('mycanvas').toDataURL("image/png").split(",")[1];
      });
      fs.write("./frame-" + current + ".png",atob(frame), 'wb');
  if (++current === NB_FRAME) {
     window.clearInterval(grabber);
     phantom.exit(0);
  }
   }, 1000);
}
});

Ausführen:

 phantomjs SaveCanvasFrame.js

Dann verwenden ImageMagick

convert *.png animated.gif

Hier gehen wir :