ImageDecoder.isTypeSupported() — Methode · JavaScript-Referenz

Signatur

ImageDecoder.isTypeSupported(type)

Beschreibung

ImageDecoder.isTypeSupported() gehört zur WebCodecs API. Die Methode ist statisch, wird also direkt über die Klasse ImageDecoder aufgerufen und nicht über eine Instanz. Sie gibt ein Promise zurück, das mit true erfüllt wird, wenn der Browser den angegebenen Bild-MIME-Typ (z. B. "image/avif", "image/webp", "image/gif") decodieren kann, und sonst mit false.

Rufen Sie die Methode vor dem Erzeugen eines ImageDecoder auf. Übergibt man dem Konstruktor einen nicht unterstützten Typ, schlägt die Decodierung später fehl – etwa über ein abgelehntes decoder.tracks.ready oder eine Ausnahme beim decode()-Aufruf. Mit einer vorherigen Prüfung können Sie sauber auf einen anderen Weg ausweichen, etwa ein <img>-Element, createImageBitmap() oder ein anderes Bildformat vom Server.

Typische Einsatzfälle sind die Auswahl eines Formats (AVIF, WebP oder JPEG), bevor Bilddaten geladen werden, die Einzelbild-Verarbeitung animierter GIFs oder WebPs auf einem <canvas> und die Bildverarbeitung in Web Workern.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		MIME-Typ des Bildformats, z. B. `"image/png"`, `"image/jpeg"`, `"image/webp"`, `"image/avif"` oder `"image/gif"`.

Rückgabewert

Typ

Promise<boolean>

Beschreibung

Ein Promise, das mit true erfüllt wird, wenn der Typ decodiert werden kann, sonst mit false.

Beispiele

Einfache Prüfung eines Formats

const supported = await ImageDecoder.isTypeSupported('image/avif');
console.log(`AVIF decodierbar: ${supported}`);

AVIF decodierbar: true

Unterstützung mehrerer Formate ermitteln

const types = ['image/png', 'image/jpeg', 'image/webp', 'image/avif', 'image/gif', 'image/jxl'];

const results = await Promise.all(
  types.map(async (type) => [type, await ImageDecoder.isTypeSupported(type)])
);

console.table(Object.fromEntries(results));

{ 'image/png': true, 'image/jpeg': true, 'image/webp': true, 'image/avif': true, 'image/gif': true, 'image/jxl': false }

Animiertes GIF nur bei Unterstützung decodieren, sonst Fallback

const renderFirstFrame = async (url, canvas) => {
  const ctx = canvas.getContext('2d');
  const type = 'image/gif';

  // Feature-Erkennung: API vorhanden und Typ unterstützt?
  if (!('ImageDecoder' in window) || !(await ImageDecoder.isTypeSupported(type))) {
    const img = new Image();
    img.src = url;
    await img.decode();
    ctx.drawImage(img, 0, 0);
    return 'Fallback über <img>';
  }

  const response = await fetch(url);
  const decoder = new ImageDecoder({ data: response.body, type });
  const { image } = await decoder.decode({ frameIndex: 0 });
  ctx.drawImage(image, 0, 0);
  image.close();
  decoder.close();
  return 'Decodiert mit ImageDecoder';
};

const canvas = document.querySelector('canvas');
console.log(await renderFirstFrame('/bilder/animation.gif', canvas));

Decodiert mit ImageDecoder

// Wichtig · Fallstricke

Feature-Erkennung zuerst: Wo WebCodecs fehlt (z. B. in Safari), gibt es ImageDecoder gar nicht. Prüfen Sie deshalb vorher mit 'ImageDecoder' in self, sonst wird ein ReferenceError geworfen.
Nur in sicheren Kontexten: Die API steht nur unter HTTPS (oder localhost) zur Verfügung, im Fenster und in dedizierten Workern.
Asynchron: Der Rückgabewert ist ein Promise, kein boolean. Ohne await ist if (ImageDecoder.isTypeSupported(t)) immer wahr, weil ein Promise-Objekt als wahr gilt.
Ein ungültiger String, der gar kein MIME-Typ ist, kann dazu führen, dass das Promise mit einem TypeError abgelehnt wird, statt false zu liefern. Fangen Sie das mit try/catch ab.
true sagt nur etwas über das Format aus. Einzelne Dateien können trotzdem beschädigt sein oder nicht unterstützte Varianten enthalten (etwa bestimmte AVIF-Profile). Rechnen Sie daher auch beim decode()-Aufruf mit Fehlern.
Das Ergebnis kann von Browser, Version und Betriebssystem abhängen. Verlassen Sie sich nicht auf fest einprogrammierte Annahmen.

Siehe auch

ImageDecoder.close() ImageDecoder.decode() ImageDecoder.reset() MediaRecorder.isTypeSupported() MediaSource.isTypeSupported()