Window: createImageBitmap() Methode

Syntax

createImageBitmap(image)
createImageBitmap(image, options)
createImageBitmap(image, sx, sy, sw, sh)
createImageBitmap(image, sx, sy, sw, sh, options)

Parameter

image

Eine Bildquelle, die eine der folgenden sein kann:

• HTMLImageElement
• SVGImageElement
• HTMLVideoElement
• HTMLCanvasElement
• Blob
• ImageData
• ImageBitmap
• OffscreenCanvas
• VideoFrame

sx

Die x-Koordinate des Referenzpunkts des Rechtecks, aus dem das ImageBitmap extrahiert wird.

sy

Die y-Koordinate des Referenzpunkts des Rechtecks, aus dem das ImageBitmap extrahiert wird.

sw

Die Breite des Rechtecks, aus dem das ImageBitmap extrahiert wird. Dieser Wert kann negativ sein.

sh

Die Hhe des Rechtecks, aus dem das ImageBitmap extrahiert wird. Dieser Wert kann negativ sein.

options Optional

Ein Objekt, das Optionen fr die Bildextraktion festlegt. Die verfgbaren Optionen sind:

imageOrientation

Gibt an, wie das Bitmap-Bild ausgerichtet werden soll.

from-image

Bild orientiert sich an den EXIF-Ausrichtungsmetadaten, falls vorhanden (Standard).

flipY

Bild orientiert sich an den EXIF-Ausrichtungsmetadaten, falls vorhanden, und wird dann vertikal gespiegelt.

none

Bild orientiert sich an der Bildkodierung, dabei werden alle Metadaten ber die Ausrichtung ignoriert (wie z.B. EXIF-Metadaten, die einem Bild hinzugefgt werden knnten, um anzugeben, dass die Kamera seitlich gedreht wurde, um das Bild im Hochformat aufzunehmen).

premultiplyAlpha

Gibt an, ob die Farbkanle des Bitmaps durch den Alphakanal vormultipliziert werden sollen. Einer von none, premultiply oder default (Standard).

colorSpaceConversion

Gibt an, ob das Bild unter Verwendung einer Farbraumkonvertierung dekodiert werden soll. Entweder none oder default (Standard). Der Wert default zeigt an, dass implementierungsspezifisches Verhalten verwendet wird.

resizeWidth

Eine lange Ganzzahl, die die Ausgabe-Breite angibt.

resizeHeight

Eine lange Ganzzahl, die die Ausgabe-Hhe angibt.

resizeQuality

Gibt den Algorithmus an, der zum Anpassen der Eingabemae an die Ausgabemae verwendet werden soll. Einer von pixelated, low (Standard), medium oder high.

Rckgabewert

Ein Promise, welches sich zu einem ImageBitmap Objekt auflst und Bitmap-Daten aus dem angegebenen Rechteck enthlt.

Beispiele

Sprites aus einem Sprite Sheet erstellen

Dieses Beispiel ldt ein Sprite Sheet, extrahiert einzelne Sprites und rendert dann jedes Sprite auf die Leinwand. Ein Sprite Sheet ist ein Bild, das mehrere kleinere Bilder enthlt, von denen jedes einzeln renderbar sein soll.

Original image:
<img src="50x50.jpg" />
<hr />
<canvas id="myCanvas"></canvas>

canvas {
  border: 2px solid green;
}

const canvas = document.getElementById("myCanvas"),
  ctx = canvas.getContext("2d"),
  image = new Image();

// Wait for the sprite sheet to load
image.onload = () => {
  Promise.all([
    // Cut out two sprites from the sprite sheet
    createImageBitmap(image, 0, 0, 32, 32),
    createImageBitmap(image, 32, 0, 32, 32),
    createImageBitmap(image, 0, 0, 50, 50, { imageOrientation: "flipY" }),
  ]).then((sprites) => {
    // Draw each sprite onto the canvas
    ctx.drawImage(sprites[0], 0, 0);
    ctx.drawImage(sprites[1], 32, 32);
    ctx.drawImage(sprites[2], 64, 64);
  });
};

// Load the sprite sheet from an image file
image.src = "50x50.jpg";

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• WorkerGlobalScope.createImageBitmap()
• CanvasRenderingContext2D.drawImage()
• ImageData