ImageTrackList.length — Eigenschaft · JavaScript-Referenz

Signatur

get ImageTrackList.length

Beschreibung

Die schreibgeschützte Eigenschaft length der Schnittstelle ImageTrackList liefert die Anzahl der Bild-Tracks, die ein ImageDecoder in den kodierten Bilddaten gefunden hat. Die Liste erreichst du über ImageDecoder.tracks.

Die meisten Bildformate wie JPEG, PNG oder GIF enthalten genau einen Track. Containerformate wie AVIF können aber mehrere Tracks enthalten, zum Beispiel ein Standbild und eine animierte Sequenz. Mit length kannst du über die Tracks iterieren (per Index, z. B. tracks[i]) und dann einen bestimmten Track auswählen.

Wichtig: Der Wert stimmt erst dann sicher, wenn das Promise ImageTrackList.ready erfüllt ist. Vorher kann length noch 0 sein, weil der Decoder die Metadaten noch nicht gelesen hat.

Rückgabewert

Typ

number

Beschreibung

Eine ganze Zahl ≥ 0: die Anzahl der ImageTrack-Objekte in der Liste.

Beispiele

Anzahl der Tracks nach dem Laden ausgeben

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

// Warten, bis die Track-Metadaten verfügbar sind
await decoder.tracks.ready;
console.log(`Gefundene Tracks: ${decoder.tracks.length}`);

Gefundene Tracks: 1

Alle Tracks per Index durchlaufen

const inspectTracks = async (url, type) => {
  const { body } = await fetch(url);
  const decoder = new ImageDecoder({ data: body, type });
  await decoder.tracks.ready;

  const { tracks } = decoder;
  for (let i = 0; i < tracks.length; i++) {
    const track = tracks[i];
    console.log(`Track ${i}: animiert=${track.animated}, Frames=${track.frameCount}, ausgewählt=${track.selected}`);
  }
};

await inspectTracks('bild.avif', 'image/avif');

Track 0: animiert=false, Frames=1, ausgewählt=true Track 1: animiert=true, Frames=24, ausgewählt=false

Animierten Track auswählen, falls es mehrere gibt

const decoder = new ImageDecoder({
  data: (await fetch('bild.avif')).body,
  type: 'image/avif'
});
await decoder.tracks.ready;

const { tracks } = decoder;
if (tracks.length > 1) {
  const animatedTrack = Array.from({ length: tracks.length }, (_, i) => tracks[i])
    .find((t) => t.animated);
  if (animatedTrack) animatedTrack.selected = true;
}

const { image } = await decoder.decode({ frameIndex: 0 });
console.log(image.displayWidth, image.displayHeight);
image.close();

640 480

// Wichtig · Fallstricke

Zeitpunkt: Vor dem Erfüllen von tracks.ready kann length noch 0 liefern. Lies den Wert deshalb immer erst nach await decoder.tracks.ready.
Schreibgeschützt: Wenn du length einen Wert zuweist, passiert nichts (im Strict Mode wird ein TypeError geworfen). Anders als bei Arrays kannst du die Liste damit nicht kürzen.
Kein echtes Array: ImageTrackList hat keine Array-Methoden wie map oder filter. Verwende eine Index-Schleife oder baue die Liste mit Array.from({ length: tracks.length }, (_, i) => tracks[i]) in ein Array um.
Kompatibilität: Die Eigenschaft gehört zur WebCodecs API. Sie läuft nur in sicheren Kontexten (HTTPS) und in Chromium-Browsern sowie neueren Firefox-Versionen. Safari unterstützt ImageDecoder bisher nicht. Prüfe die Unterstützung vorher mit 'ImageDecoder' in window.
Nach decoder.close() solltest du nicht mehr auf die Track-Liste zugreifen.

Siehe auch

ImageTrackList.ready ImageTrackList.selectedIndex ImageTrackList.selectedTrack AudioTrackList.length TextTrackList.length