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.

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 Schreibgeschützt: Gibt einen booleschen Wert zurück, der anzeigt, ob die kodierten Daten vollständig gepuffert sind.
ImageDecoder.completed Schreibgeschützt: Gibt ein Promise zurück, das aufgelöst wird, sobald complete den Wert true hat.
ImageDecoder.tracks Schreibgeschützt: 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 Schreibgeschützt: 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:

html

<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