Window: createImageBitmap() Methode - Web-APIs | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

Window: createImageBitmap() Methode

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2021 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

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.

In diesem Artikel

Syntax

js
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:

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

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

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

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

options Optional

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, 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-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), medium oder high.

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

canvas {
  border: 2px solid green;
}

js
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";

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

Canvas API
Fenster
Instanzeigenschaften
Instanzmethoden
Events
Vererbung
1. EventTarget
Verwandte Seiten für Canvas API
Anleitungen
1. Manipulation von Video mit Canvas
Anleitung
1. Canvas-Leitfaden
2. Grundlegende Verwendung von Canvas
3. Zeichnen von Formen mit Canvas
4. Anwenden von Stilen und Farben
5. Zeichnen von Text
6. Verwendung von Bildern
7. Transformationen
8. Compositing und Clipping
9. Grundlegende Animationen
10. Fortgeschrittene Animationen
11. Pixelmanipulation mit dem Canvas
12. Optimierung der Leinwand
13. Finale

Window: createImageBitmap() Methode

In diesem Artikel

Syntax

Parameter

Rückgabewert

Beispiele

Sprites aus einem Sprite Sheet erstellen

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN