Window: createImageBitmap() Methode
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.
* Some parts of this feature may have varying levels of support.
Die createImageBitmap() Methode der Schnittstelle Window erstellt ein Bitmap aus einer gegebenen Quelle, optional zugeschnitten, um nur einen Teil dieser Quelle zu enthalten. Sie akzeptiert eine Vielzahl unterschiedlicher Bildquellen und gibt ein Promise zurück, welches sich zu einem ImageBitmap auflöst.
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:
sx-
Die x-Koordinate des Referenzpunkts des Rechtecks, aus dem das
ImageBitmapextrahiert wird. sy-
Die y-Koordinate des Referenzpunkts des Rechtecks, aus dem das
ImageBitmapextrahiert wird. sw-
Die Breite des Rechtecks, aus dem das
ImageBitmapextrahiert wird. Dieser Wert kann negativ sein. sh-
Die Höhe des Rechtecks, aus dem das
ImageBitmapextrahiert wird. Dieser Wert kann negativ sein. optionsOptional-
Ein Objekt, das Optionen für die Bildextraktion festlegt. Die verfügbaren 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 hinzugefügt werden könnten, um anzugeben, dass die Kamera seitlich gedreht wurde, um das Bild im Hochformat aufzunehmen).
premultiplyAlpha-
Gibt an, ob die Farbkanäle des Bitmaps durch den Alphakanal vormultipliziert werden sollen. Einer von
none,premultiplyoderdefault(Standard). colorSpaceConversion-
Gibt an, ob das Bild unter Verwendung einer Farbraumkonvertierung dekodiert werden soll. Entweder
noneoderdefault(Standard). Der Wertdefaultzeigt an, dass implementierungsspezifisches Verhalten verwendet wird. resizeWidth-
Eine lange Ganzzahl, die die Ausgabe-Breite angibt.
resizeHeight-
Eine lange Ganzzahl, die die Ausgabe-Höhe angibt.
resizeQuality-
Gibt den Algorithmus an, der zum Anpassen der Eingabemaße an die Ausgabemaße verwendet werden soll. Einer von
pixelated,low(Standard),mediumoderhigh.
Rückgabewert
Ein Promise, welches sich zu einem ImageBitmap Objekt auflöst und Bitmap-Daten aus dem angegebenen Rechteck enthält.
Beispiele
Sprites aus einem Sprite Sheet erstellen
Dieses Beispiel lädt ein Sprite Sheet, extrahiert einzelne Sprites und rendert dann jedes Sprite auf die Leinwand. Ein Sprite Sheet ist ein Bild, das mehrere kleinere Bilder enthält, von denen jedes einzeln renderbar sein soll.
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
| Specification |
|---|
| HTML # dom-createimagebitmap-dev |