ImageDecoder
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.
Hinweis: Diese Funktion ist in Dedicated Web Workers verfügbar.
Das ImageDecoder-Interface der WebCodecs API bietet die Möglichkeit, kodierte Bilddaten zu entpacken und zu dekodieren.
Konstruktor
ImageDecoder()-
Erstellt ein neues
ImageDecoder-Objekt.
Instanzeigenschaften
ImageDecoder.completeSchreibgeschützt-
Gibt einen booleschen Wert zurück, der angibt, ob die kodierten Daten vollständig gepuffert sind.
ImageDecoder.completedSchreibgeschützt-
Gibt ein
Promisezurück, das aufgelöst wird, sobaldcompletewahr ist. ImageDecoder.tracksSchreibgeschützt-
Gibt ein
ImageTrackList-Objekt zurück, das die verfügbaren Spuren auflistet und eine Methode zum Auswählen einer zu dekodierenden Spur bereitstellt. ImageDecoder.typeSchreibgeschützt-
Gibt einen String zurück, der den MIME-Typ widergibt, der während der Konstruktion konfiguriert wurde.
Statische Methoden
ImageDecoder.isTypeSupported()-
Gibt an, ob der bereitgestellte MIME-Typ zum Entpacken und Dekodieren unterstützt wird.
Instanzmethoden
ImageDecoder.close()-
Beendet alle ausstehenden Aufgaben und gibt Systemressourcen frei.
ImageDecoder.decode()-
Stellt eine Steuerungsnachricht in die Warteschlange, um den Rahmen eines Bildes zu dekodieren.
ImageDecoder.reset()-
Bricht alle ausstehenden
decode()-Operationen ab.
Beispiele
Gegeben sei ein <canvas>-Element:
<canvas></canvas> Dekodiert und rendert der folgende Code ein animiertes Bild auf dieser Leinwand:
let imageDecoder = null; let imageIndex = 0; function renderImage(result) { const canvas = document.querySelector("canvas"); const canvasContext = canvas.getContext("2d"); canvasContext.drawImage(result.image, 0, 0); const track = imageDecoder.tracks.selectedTrack; // We check complete here since `frameCount` won't be stable until all // data has been received. This may cause us to receive a RangeError // during the decode() call below which needs to be handled. if (imageDecoder.complete) { if (track.frameCount === 1) return; if (imageIndex + 1 >= track.frameCount) imageIndex = 0; } // Decode the next frame ahead of display so it's ready in time. imageDecoder .decode({ frameIndex: ++imageIndex }) .then((nextResult) => setTimeout(() => { renderImage(nextResult); }, result.image.duration / 1000.0), ) .catch((e) => { // We can end up requesting an imageIndex past the end since // we're using a ReadableStream from fetch(), when this happens // just wrap around. if (e instanceof RangeError) { imageIndex = 0; imageDecoder.decode({ frameIndex: imageIndex }).then(renderImage); } else { throw e; } }); } function decodeImage(imageByteStream) { imageDecoder = new ImageDecoder({ data: imageByteStream, type: "image/gif" }); imageDecoder.decode({ frameIndex: imageIndex }).then(renderImage); } fetch("fancy.gif").then((response) => decodeImage(response.body)); Spezifikationen
| Specification |
|---|
| WebCodecs # imagedecoder-interface |