Javascript: Animierte GIF zu Daten-URI

Question

Ich schreibe Open-Source-Falloutish 2 Spiel in PHP + HTML + CSS + JavaScript. Jetzt im Umgang mit dem Motor. Ich habe dieses Bild: https://dl.dropboxusercontent.com/u/4258402/nmwarrgb_e.gif

... die ich in Daten-URI konvertieren möchte. Ich muss dies tun, weil Browser Bilder cachen und dieser ist nicht geloopt, also um es "wieder ausführen" zu können, wenn die Animation endet und die Einheit zu einer anderen Kachel geht, muss ich sie in Daten-URI umwandeln. Sonst wäre ich gezwungen, das Bild immer wieder neu herunterzuladen, z. indem Sie am Ende der Bilddatei eine zufällige Zeichenfolge hinzufügen. Was gut funktioniert, aber viel zu viel transferiert und Lag verursacht.

Dies ist der Code, den ich zu verwenden versucht:

var image = new Image(); 

    (..) 

    this.convertImageObjectToDataURI = function (image) { 
       var canvasTemp = document.createElement('canvas'); 
       canvasTemp.width = image.naturalWidth; // or 'width' if you want a special/scaled size 
       canvasTemp.height = image.naturalHeight; // or 'height' if you want a special/scaled size 

       canvasTemp.getContext('2d').drawImage(image, 0, 0); 

       var dataUri = canvasTemp.toDataURL('image/gif'); 

       // Modify Data URI beginning 
       dataUri = "data:image/gif;" + dataUri.substring(15); 
       console.log(dataUri); 

       // Return image as Data URI 
       return dataUri; 
}; 

Leider erzeugt er Daten URI für den ersten Frame nur. Ich habe versucht, Plugins, lesen über HTML-Canvas, aber immer noch Ich weiß einfach nicht, wie animierte GIF zu Daten URI konvertieren. Jede Hilfe wäre sehr, sehr willkommen!

Answer 1

Ich glaube, es gibt keine direkte Möglichkeit, das mit JavaScript zu tun. Wenn Sie eine Zeichenfläche verwenden, müssen Sie jedes einzelne Bild darauf zeichnen und in eine GIF-Datei codieren. Dies scheint mit der aktuellen API unmöglich zu sein, da es keine Möglichkeit gibt, einzelne Frames zu extrahieren (außer durch manuelle Analyse der GIF-Datei).

Sie können erfolgreich sein, indem Sie die binäre GIF-Datei mit JavaScript herunterladen (erinnern Sie sich an domänenübergreifende Einschränkungen von HTTP-Anforderungen) und generieren Sie eine Base64-codierte Daten-URL. Zum Beispiel könnten Sie this example verwenden, um ein Uint8Array zu erhalten, das Sie dann convert to a base64 string können.

Sie sollten wahrscheinlich in Erwägung ziehen, die Daten-URLs statisch zu generieren, ohne JavaScript zu verwenden. Zum Beispiel können Sie diesen Shell-Befehl verwenden, um die Daten-URL für Ihre GIF-Datei zu generieren:

echo "data:image/gif;base64,"`curl --silent 'https://dl.dropboxusercontent.com/u/4258402/nmwarrgb_e.gif' | base64 --wrap=0` 

Es gibt auch eine Reihe von Online-Diensten, die Daten URLs von Dateien generieren.

Answer 2

Es ist nicht mit Javascript möglich, Serverdateien in diesem Modus mit Kompatibilität aller Browser zu lesen, aber ich empfehle Ihnen, Sprites anstelle von animierten GIFs zu verwenden. Ein Sprite ist eine PNG-Datei (die Alpha-Kanal erlaubt) mit allen Frames getrennt voneinander gezeichnet. Stellen Sie sich vor, diese Datei:

Wie Sie sehen können, ist es ein 600x150 Bild (150x150 jeder Rahmen, 4 Frames). So können Sie mit CSS-Animationen wie diese animieren:

.dots { 
 
    width: 150px; 
 
    height: 150px; 
 
    background-image: url(http://i.stack.imgur.com/bCHFq.png); 
 
    
 
    -webkit-animation: play .4s steps(4) infinite; 
 
     -moz-animation: play .4s steps(4) infinite; 
 
     -ms-animation: play .4s steps(4) infinite; 
 
     -o-animation: play .4s steps(4) infinite; 
 
      animation: play .4s steps(4) infinite; 
 
} 
 

 
@-webkit-keyframes play { 
 
    from { background-position: 0px; } 
 
    to { background-position: -600px; } 
 
} 
 

 
@-moz-keyframes play { 
 
    from { background-position: 0px; } 
 
    to { background-position: -600px; } 
 
} 
 

 
@-ms-keyframes play { 
 
    from { background-position: 0px; } 
 
    to { background-position: -600px; } 
 
} 
 

 
@-o-keyframes play { 
 
    from { background-position: 0px; } 
 
    to { background-position: -600px; } 
 
} 
 

 
@keyframes play { 
 
    from { background-position: 0px; } 
 
    to { background-position: -600px; } 
 
}

<div class="dots"></div>

Damit können Sie die Keyframes anpassen, die Geschwindigkeit, die Anzahl der Frames (Schritte) und die wichtigsten: Sie don Überlasten Sie den CPU- und RAM-Speicher im Browser-Client nicht.

Viel Glück.