ImageBitmap.height — Eigenschaft · JavaScript-Referenz

Signatur

ImageBitmap.height

Beschreibung

ImageBitmap.height gibt die Höhe der Bitmap als ganze Zahl (unsigned long) zurück. Die Eigenschaft ist schreibgeschützt. Zusammen mit ImageBitmap.width brauchen Sie sie, um die Größe eines Canvas festzulegen, Seitenverhältnisse zu berechnen oder Kacheln in einem Sprite-Sheet anzuordnen.

Der Wert entspricht den Pixelmaßen der Bitmap, so wie createImageBitmap() sie erzeugt hat. Wenn Sie beim Aufruf einen Ausschnitt (sx, sy, sw, sh) oder die Optionen resizeWidth/resizeHeight angeben, liefert height die daraus entstandene Höhe und nicht die Höhe der Originalquelle. MDN spricht zwar von „CSS-Pixeln“, praktisch sind es aber Bildpixel. Der Faktor devicePixelRatio spielt dabei keine Rolle.

Die Eigenschaft gibt es auch in Web Workern. Das ist nützlich, wenn Sie Bilder im Worker dekodieren und dort mit OffscreenCanvas weiterverarbeiten. Sobald eine Bitmap mit close() freigegeben oder per postMessage() übertragen wurde, liefert height nur noch 0.

Rückgabewert

Typ

number

Beschreibung

Höhe der Bitmap in Pixeln als nicht-negative ganze Zahl. 0, wenn die Bitmap geschlossen oder übertragen wurde.

Beispiele

Canvas an die Bildgröße anpassen

const response = await fetch('/bilder/foto.jpg');
const blob = await response.blob();
const bitmap = await createImageBitmap(blob);

const canvas = document.querySelector('canvas');
canvas.width = bitmap.width;
canvas.height = bitmap.height;
canvas.getContext('2d').drawImage(bitmap, 0, 0);

console.log(`Bild: ${bitmap.width} × ${bitmap.height}`);

Bild: 1920 × 1080

Höhe nach Skalierung mit resizeHeight

const img = document.querySelector('#vorschau');
await img.decode();

// Nur die Höhe vorgeben: Die Breite wird proportional berechnet
const thumb = await createImageBitmap(img, {
  resizeHeight: 200,
  resizeQuality: 'high'
});

console.log(img.naturalHeight, '→', thumb.height, '| Breite:', thumb.width);

1080 → 200 | Breite: 356

Wert nach close() und Ausschnitt

const canvas = new OffscreenCanvas(400, 300);

// Ausschnitt: 100 × 50 Pixel ab Position (10, 10)
const bitmap = await createImageBitmap(canvas, 10, 10, 100, 50);
console.log(bitmap.height); // 50

bitmap.close(); // Speicher freigeben
console.log(bitmap.height); // 0

50 0

Seitenverhältnis im Worker berechnen

// worker.js
self.onmessage = async ({ data: blob }) => {
  const bitmap = await createImageBitmap(blob);
  const ratio = bitmap.width / bitmap.height;
  self.postMessage({
    hoehe: bitmap.height,
    verhaeltnis: ratio.toFixed(3)
  });
  bitmap.close();
};

{ hoehe: 1080, verhaeltnis: "1.778" }

// Wichtig · Fallstricke

Nur lesbar: Wenn Sie bitmap.height = 100 zuweisen, passiert nichts. Im Strict Mode wird ein TypeError geworfen. Eine andere Größe erhalten Sie nur über eine neue Bitmap mit resizeHeight oder beim Zeichnen mit drawImage().
0 nach close() oder Übertragung: Nach close() oder einer Übertragung als Transferable (postMessage(bitmap, [bitmap])) liefert height nur noch 0. Lesen Sie die Maße also vorher aus.
EXIF-Ausrichtung: Mit imageOrientation: 'from-image' (in aktuellen Browsern der Standard) können Breite und Höhe bei Hochformatfotos gegenüber den gespeicherten Pixeldaten vertauscht sein.
Keine Anpassung an HiDPI: Der Wert berücksichtigt devicePixelRatio nicht. Für scharfe Darstellung auf hochauflösenden Displays müssen Sie das Canvas selbst skalieren.
Kompatibilität: In allen modernen Browsern verfügbar. Safari unterstützt createImageBitmap() vollständig erst ab Version 15, der Internet Explorer gar nicht.

Siehe auch

ImageBitmap ImageBitmap.width ImageBitmap.close() OffscreenCanvas CanvasRenderingContext2D.drawImage() ImageData.height