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.complete Schreibgeschützt

Gibt einen booleschen Wert zurück, der angibt, ob die kodierten Daten vollständig gepuffert sind.

ImageDecoder.completed Schreibgeschützt

Gibt ein Promise zurück, das aufgelöst wird, sobald complete wahr ist.

ImageDecoder.tracks Schreibgeschü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.type Schreibgeschü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:

html
<canvas></canvas>

Dekodiert und rendert der folgende Code ein animiertes Bild auf dieser Leinwand:

js
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