ImageDecoder.type — Eigenschaft · JavaScript-Referenz

Signatur

ImageDecoder.type

Beschreibung

Die schreibgeschützte Eigenschaft type einer ImageDecoder-Instanz gibt den MIME-Typ als String zurück, der dem Konstruktor im Optionsobjekt unter type übergeben wurde, z. B. "image/png", "image/gif", "image/webp" oder "image/avif".

Die Eigenschaft ist vor allem dann nützlich, wenn Decoder an mehreren Stellen erzeugt und zentral verarbeitet werden, etwa in einer Bildergalerie, einem Worker oder einer Hilfsfunktion, die unterschiedliche Formate verarbeitet. Mit decoder.type lässt sich jederzeit nachvollziehen, für welches Format der Decoder konfiguriert ist, ohne dass man die ursprünglichen Optionen mitführen muss.

Wichtig: type spiegelt nur die Konfiguration wider. Die Bytes werden dabei nicht untersucht. Ob der Browser das Format überhaupt dekodieren kann, prüft man vorab mit der statischen Methode ImageDecoder.isTypeSupported(). Ob die Daten tatsächlich zum Format passen, zeigt sich erst beim Dekodieren (decoder.tracks.ready bzw. decoder.decode()).

Rückgabewert

Typ

string

Beschreibung

Der MIME-Typ, der beim Aufruf von new ImageDecoder({ type, data }) angegeben wurde, z. B. "image/gif".

Beispiele

MIME-Typ eines Decoders auslesen

const response = await fetch('/bilder/animation.gif');

const decoder = new ImageDecoder({
  type: 'image/gif',
  data: response.body
});

console.log(decoder.type);

image/gif

Typ aus dem Content-Type-Header übernehmen und vorher prüfen

const ladeDecoder = async (url) => {
  const response = await fetch(url);
  // Parameter wie "; charset=..." abschneiden
  const mime = (response.headers.get('Content-Type') ?? '').split(';')[0].trim();

  if (!(await ImageDecoder.isTypeSupported(mime))) {
    throw new Error(`Format nicht unterstützt: ${mime}`);
  }

  return new ImageDecoder({ type: mime, data: response.body });
};

const decoder = await ladeDecoder('/bilder/foto.webp');
console.log(`Decoder für ${decoder.type} bereit`);

Decoder für image/webp bereit

Formatabhängige Verarbeitung mehrerer Decoder

const verarbeite = async (decoder) => {
  await decoder.tracks.ready;
  const track = decoder.tracks.selectedTrack;

  if (decoder.type === 'image/gif' || track.animated) {
    console.log(`${decoder.type}: ${track.frameCount} Frames (animiert)`);
  } else {
    const { image } = await decoder.decode();
    console.log(`${decoder.type}: ${image.displayWidth}×${image.displayHeight}`);
    image.close();
  }
  decoder.close();
};

const blob = await (await fetch('/bilder/logo.png')).blob();
await verarbeite(new ImageDecoder({ type: blob.type, data: await blob.arrayBuffer() }));

image/png: 512×512

// Wichtig · Fallstricke

Keine Formaterkennung: type gibt nur zurück, was konfiguriert wurde. Wird ein falscher Typ angegeben (z. B. "image/png" für GIF-Daten), zeigt die Eigenschaft trotzdem den falschen Wert. Der Fehler fällt erst beim Dekodieren auf, wenn tracks.ready oder decode() mit einem Fehler abgelehnt wird.
Nicht unterstützte Typen: Bei einem ungültigen MIME-Typ wirft der Konstruktor einen TypeError. Für einen Typ, der gültig, aber nicht unterstützt ist, schlägt das Dekodieren fehl. Deshalb vorher ImageDecoder.isTypeSupported() aufrufen.
Content-Type-Header: Header können Parameter wie ; charset=binary enthalten. Diese vor der Übergabe abschneiden.
Schreibgeschützt: Eine Zuweisung an type hat keine Wirkung (im Strict Mode TypeError). Für einen anderen Typ muss ein neuer Decoder erzeugt werden.
Kompatibilität: Die Eigenschaft gehört zur WebCodecs API. Sie ist nur in sicheren Kontexten (HTTPS) verfügbar, im Fenster- und im Worker-Kontext. Safari unterstützt ImageDecoder derzeit nicht. Deshalb per 'ImageDecoder' in globalThis prüfen, ob die API vorhanden ist.

Siehe auch

ImageDecoder.complete ImageDecoder.tracks ImageDecoder.completed AudioDecoder.state VideoDecoder.state