Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
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.
DiecreateImageBitmap() Methode der SchnittstelleWindow 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 einPromise zurück, welches sich zu einemImageBitmap auflöst.
Syntax
createImageBitmap(image)createImageBitmap(image, options)createImageBitmap(image, sx, sy, sw, sh)createImageBitmap(image, sx, sy, sw, sh, options)Parameter
imageEine Bildquelle, die eine der folgenden sein kann:
sxDie x-Koordinate des Referenzpunkts des Rechtecks, aus dem das
ImageBitmapextrahiert wird.syDie y-Koordinate des Referenzpunkts des Rechtecks, aus dem das
ImageBitmapextrahiert wird.swDie Breite des Rechtecks, aus dem das
ImageBitmapextrahiert wird. Dieser Wert kann negativ sein.shDie Höhe des Rechtecks, aus dem das
ImageBitmapextrahiert wird. Dieser Wert kann negativ sein.optionsOptionalEin Objekt, das Optionen für die Bildextraktion festlegt. Die verfügbaren Optionen sind:
imageOrientationGibt an, wie das Bitmap-Bild ausgerichtet werden soll.
from-imageBild orientiert sich an den EXIF-Ausrichtungsmetadaten, falls vorhanden (Standard).
flipYBild orientiert sich an den EXIF-Ausrichtungsmetadaten, falls vorhanden, und wird dann vertikal gespiegelt.
noneBild 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).
premultiplyAlphaGibt an, ob die Farbkanäle des Bitmaps durch den Alphakanal vormultipliziert werden sollen. Einer von
none,premultiplyoderdefault(Standard).colorSpaceConversionGibt an, ob das Bild unter Verwendung einer Farbraumkonvertierung dekodiert werden soll. Entweder
noneoderdefault(Standard). Der Wertdefaultzeigt an, dass implementierungsspezifisches Verhalten verwendet wird.resizeWidthEine lange Ganzzahl, die die Ausgabe-Breite angibt.
resizeHeightEine lange Ganzzahl, die die Ausgabe-Höhe angibt.
resizeQualityGibt den Algorithmus an, der zum Anpassen der Eingabemaße an die Ausgabemaße verwendet werden soll. Einer von
pixelated,low(Standard),mediumoderhigh.
Rückgabewert
EinPromise, welches sich zu einemImageBitmap 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.
Original image:<img src="50x50.jpg" /><hr /><canvas></canvas>canvas { border: 2px solid green;}const canvas = document.getElementById("myCanvas"), ctx = canvas.getContext("2d"), image = new Image();// Wait for the sprite sheet to loadimage.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 fileimage.src = "50x50.jpg";Spezifikationen
| Specification |
|---|
| HTML # dom-createimagebitmap-dev |