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: Dieses Feature ist verfügbar in Dedicated Web Workers.
Die ImageDecoder
-Schnittstelle der WebCodecs API bietet eine Möglichkeit, kodierte Bilddaten zu entpacken und zu dekodieren.
Konstruktor
ImageDecoder()
-
Erstellt ein neues
ImageDecoder
-Objekt.
Instanz-Eigenschaften
ImageDecoder.complete
Nur lesbar-
Gibt einen booleschen Wert zurück, der anzeigt, ob die kodierten Daten vollständig gepuffert sind.
ImageDecoder.completed
Nur lesbar-
Gibt ein
Promise
zurück, das aufgelöst wird, sobaldcomplete
den Wert true hat. ImageDecoder.tracks
Nur lesbar-
Gibt ein
ImageTrackList
-Objekt zurück, das die verfügbaren Tracks auflistet und eine Methode zum Auswählen eines zu dekodierenden Tracks bereitstellt. ImageDecoder.type
Nur lesbar-
Gibt einen String zurück, der den MIME-Typ widerspiegelt, der während der Konstruktion konfiguriert wurde.
Statische Methoden
ImageDecoder.isTypeSupported()
-
Gibt an, ob der bereitgestellte MIME-Typ für das Entpacken und Dekodieren unterstützt wird.
Instanz-Methoden
ImageDecoder.close()
-
Beendet alle anstehenden Arbeiten und gibt Systemressourcen frei.
ImageDecoder.decode()
-
Stellt eine Steuerungsnachricht in die Warteschlange, um den Frame eines Bildes zu dekodieren.
ImageDecoder.reset()
-
Bricht alle anstehenden
decode()
-Operationen ab.
Beispiele
Gegeben ist ein <canvas>
-Element:
<canvas></canvas>
Der folgende Code dekodiert und rendert ein animiertes Bild auf diese 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 |
Browser-Kompatibilität
BCD tables only load in the browser