Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
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 insicheren Kontexten (HTTPS) in einigen oder allenunterstützenden Browsern verfügbar.
Hinweis: Diese Funktion ist inDedicated Web Workers verfügbar.
DasImageDecoder-Interface derWebCodecs API bietet die Möglichkeit, kodierte Bilddaten zu entpacken und zu dekodieren.
Konstruktor
ImageDecoder()Erstellt ein neues
ImageDecoder-Objekt.
Instanzeigenschaften
ImageDecoder.completeSchreibgeschütztGibt einen booleschen Wert zurück, der angibt, ob die kodierten Daten vollständig gepuffert sind.
ImageDecoder.completedSchreibgeschütztGibt ein
Promisezurück, das aufgelöst wird, sobaldcompletewahr ist.ImageDecoder.tracksSchreibgeschütztGibt ein
ImageTrackList-Objekt zurück, das die verfügbaren Spuren auflistet und eine Methode zum Auswählen einer zu dekodierenden Spur bereitstellt.ImageDecoder.typeSchreibgeschütztGibt einen String zurück, der denMIME-Typ widergibt, der während der Konstruktion konfiguriert wurde.
Statische Methoden
ImageDecoder.isTypeSupported()Gibt an, ob der bereitgestellteMIME-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 |