Ich muss alle Frames eines animierten GIF auf eine HTML5-Leinwand laden.Extrahieren von Einzelbildern von einem animierten GIF nach Canvas
Bitte beachten Sie, ich möchte nicht animiert animieren (jemand fragte dies zuvor), alles was ich will, ist, alle Frames zu extrahieren, um sie als Einzelbilder zu verwenden.
Entschuldigung, die kurze Antwort ist, dass JavaScript den aktuellen Frame eines animierten GIFs nicht steuern kann.
Die lange Antwort ist, dass es gibt nur eine Art und Weise zu tun, was Sie nur mit JS wollen, aber sie sind sehr viel gewundene Hacks.
Beispiel für hackischen Weg: Erstellen Sie eine Leinwand und fügen Sie sie nicht dem DOM hinzu (so wird dies von niemandem gesehen). Zeichnen Sie in einer schnellen Schleife (setTimeout) ständig auf diese Arbeitsfläche und sammeln Sie Snapshots. Vergleichen Sie die Canvas-ImageData, um zu sehen, ob sich die Frames geändert haben oder nicht.
Es wäre eine bessere Nutzung Ihrer Zeit, wahrscheinlich, um zu sehen, wie Sie Ihren Server, die für Sie auseinander zu teilen bekommen können (mit PHP/Perl/Python/etc)
Der hackische Weg ist schlau, aber unberechenbar. Ich stimme zu, dass, wenn keine besseren JS-Lösungen herauskommen, ich auf serverseitige Skripts zurückgreifen muss ... Danke. – Omiod
Dieser Hack sollte nicht möglich sein. 'Wenn ein CanvasImageSource-Objekt ein animiertes Bild in einem HTMLImageElement darstellt, muss der Benutzeragent das Standardbild der Animation verwenden (das Format, das im Format definiert ist, wenn Animation nicht unterstützt oder deaktiviert ist) oder, falls vorhanden kein solches Bild, das erste Bild der Animation "https://html.spec.whatwg.org/multipage/scripting.html#dom-context-2d-drawimage#image-sources-for-2d-rendering-contexts – Robert
This Antwort war wahrscheinlich zu der Zeit richtig. Aber heute kann libgif-js den Job erledigen, und es ist auch ziemlich einfach. –
einen Blick auf jsgif nehmen; Es lädt ein GIF herunter, analysiert es und zeichnet die einzelnen Frames der Datei in eine <canvas>. Mit ein wenig graben sollten Sie in der Lage sein, den Code zu finden, der die einzelnen Frames zeichnet und von dort aus arbeitet.
Buzzfeed haben den Code aus dem Repo TommityTom veröffentlicht. Ich habe es noch nicht ausprobiert, aber es sieht gut aus.
kann u bitte spezifischere –
sicher sein. Mit JavaScript + Canvas möchte ich eine einzelne "Anim-GIF" -Datei laden (die aus vielen Frames besteht), und dann möchte ich jeden einzelnen extrahierten Frame als Einzelbilder verwenden. – Omiod