Signatur
Beschreibung
ImageTrackList.selectedTrack gehört zur WebCodecs API. Eine ImageTrackList erhalten Sie über ImageDecoder.tracks. Sie enthält alle Bild-Tracks einer Bilddatei. Die meisten Formate haben genau einen Track. Manche Container (z. B. AVIF) können mehrere enthalten, etwa ein Standbild und eine Animation.
Die Eigenschaft liefert den Track, den der Decoder gerade verwendet. Aus ihm lesen Sie Metadaten wie animated, frameCount und repetitionCount. So entscheiden Sie zum Beispiel, ob Sie nur ein Einzelbild dekodieren oder eine Animationsschleife aufbauen. Alle späteren Aufrufe von ImageDecoder.decode() beziehen sich auf diesen Track.
Die Eigenschaft ist nur lesbar. Um den Track zu wechseln, setzen Sie selected = true auf einem anderen ImageTrack aus der Liste. Danach verweisen selectedTrack und selectedIndex auf den neuen Track. Die Liste ist erst gefüllt, wenn das Promise ImageTrackList.ready erfüllt ist. Vorher liefert selectedTrack in der Regel null.
Rückgabewert
ImageTrack, oder null, wenn (noch) kein Track ausgewählt ist.Beispiele
Prüfen, ob ein Bild animiert ist
const response = await fetch('/bilder/lade-animation.gif');
const decoder = new ImageDecoder({
data: response.body,
type: 'image/gif'
});
// Warten, bis die Track-Informationen vorliegen
await decoder.tracks.ready;
const track = decoder.tracks.selectedTrack;
if (track) {
console.log('Animiert:', track.animated);
console.log('Wiederholungen:', track.repetitionCount);
}Alle Frames des ausgewählten Tracks auf ein Canvas zeichnen
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const response = await fetch('/bilder/banner.webp');
const decoder = new ImageDecoder({ data: response.body, type: 'image/webp' });
// completed abwarten, damit frameCount endgültig ist
await decoder.completed;
const { frameCount } = decoder.tracks.selectedTrack;
for (let i = 0; i < frameCount; i++) {
const { image } = await decoder.decode({ frameIndex: i });
ctx.drawImage(image, 0, 0);
const dauerMs = (image.duration ?? 100000) / 1000; // duration in Mikrosekunden
image.close(); // VideoFrame sofort freigeben
await new Promise((r) => setTimeout(r, dauerMs));
}Auf einen anderen Track wechseln (z. B. bei AVIF)
const response = await fetch('/bilder/multi.avif');
const decoder = new ImageDecoder({ data: response.body, type: 'image/avif' });
await decoder.tracks.ready;
console.log('Vorher:', decoder.tracks.selectedIndex);
// Den ersten animierten Track suchen und auswählen
for (let i = 0; i < decoder.tracks.length; i++) {
const t = decoder.tracks[i];
if (t.animated) {
t.selected = true; // selectedTrack ist schreibgeschützt, daher über selected wechseln
break;
}
}
console.log('Nachher:', decoder.tracks.selectedIndex);
console.log(decoder.tracks.selectedTrack.animated);// Wichtig · Fallstricke
- Erst nach
tracks.readyverlässlich: Vorher ist die Liste leer undselectedTrackliefertnull. Prüfen Sie den Wert, bevor Sie Eigenschaften davon lesen. - Schreibgeschützt: Eine Zuweisung an
selectedTrackhat keine Wirkung. Im Strict Mode löst sie einenTypeErroraus. Den Track wechseln Sie überImageTrack.selected = true. Mitselected = falseheben Sie die Auswahl auf, dann wirdselectedTrackzunull. - Trackwechsel setzt den Decoder zurück: Laufende
decode()-Aufrufe werden verworfen, deren Promises werden abgelehnt. frameCountkann wachsen: Wenn die Daten alsReadableStreamhereinkommen, istframeCounterst nachdecoder.completedendgültig.- Nach
decoder.close()sind die Track-Objekte nicht mehr nutzbar. - Kompatibilität:
ImageDecodergibt es nur in Chromium-Browsern (ab 94) und im neueren Firefox, Safari unterstützt es nicht. Die API setzt einen sicheren Kontext (HTTPS) voraus und läuft auch in Workern. Prüfen Sie die Unterstützung vorher mit'ImageDecoder' in self.