CanvasRenderingContext2D: getImageData() Methode
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die Methode getImageData()
der CanvasRenderingContext2D
im Canvas-2D-API gibt ein ImageData
-Objekt zurück, das die zugrunde liegenden Pixeldaten für einen bestimmten Bereich der Leinwand darstellt.
Diese Methode wird nicht von der Transformationsmatrix der Leinwand beeinflusst. Wenn das angegebene Rechteck über die Ränder der Leinwand hinausgeht, sind die außerhalb der Leinwand befindlichen Pixel im zurückgegebenen ImageData
-Objekt transparent schwarz.
Hinweis: Bilddaten können mit der Methode putImageData()
auf eine Leinwand gemalt werden.
Mehr Informationen über getImageData()
und die allgemeine Manipulation von Leinwandinhalten finden Sie in Pixelmanipulation mit Leinwand.
Syntax
getImageData(sx, sy, sw, sh)
getImageData(sx, sy, sw, sh, settings)
Parameter
sx
-
Die x-Achsen-Koordinate der oberen linken Ecke des Rechtecks, aus dem die
ImageData
extrahiert wird. sy
-
Die y-Achsen-Koordinate der oberen linken Ecke des Rechtecks, aus dem die
ImageData
extrahiert wird. sw
-
Die Breite des Rechtecks, aus dem die
ImageData
extrahiert wird. Positive Werte sind nach rechts, und negative nach links. sh
-
Die Höhe des Rechtecks, aus dem die
ImageData
extrahiert wird. Positive Werte sind nach unten, und negative nach oben. settings
Optional-
Ein Objekt mit den folgenden Eigenschaften:
colorSpace
: Gibt den Farbraum der Bilddaten an. Kann auf"srgb"
für den sRGB-Farbraum oder"display-p3"
für den display-p3-Farbraum gesetzt werden.
Rückgabewert
Ein ImageData
-Objekt, das die Bilddaten für das angegebene Rechteck der Leinwand enthält. Die Koordinaten der oberen linken Ecke des Rechtecks sind (sx, sy)
, während die Koordinaten der unteren Ecke (sx + sw - 1, sy + sh - 1)
sind.
Ausnahmen
IndexSizeError
DOMException
-
Wird ausgelöst, wenn entweder
sw
odersh
null sind. SecurityError
DOMException
-
Die Leinwand enthält oder könnte Pixel enthalten, die von einem Ursprung geladen wurden, der sich von dem unterscheidet, von dem das Dokument selbst geladen wurde. Um zu vermeiden, dass ein
SecurityError
DOMException
in dieser Situation ausgelöst wird, konfigurieren Sie CORS, um die Verwendung des Quellbildes auf diese Weise zu erlauben. Siehe Zulassen der bereichsübergreifenden Verwendung von Bildern und Leinwand.
Beispiele
Bilddaten von einer Leinwand abrufen
Dieses Beispiel zeichnet ein Bild und verwendet dann getImageData()
, um einen Teil der Leinwand zu erfassen.
Wir verwenden getImageData()
, um einen Ausschnitt des Bildes zu extrahieren, beginnend bei (10, 20)
, mit einer Breite von 80
und einer Höhe von 230
. Wir zeichnen diesen Ausschnitt dann dreimal, wobei wir die Ausschnitte fortschreitend unterhalb und rechts vom letzten Ausschnitt positionieren.
HTML
<canvas id="canvas" width="700" height="400"></canvas>
JavaScript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const image = new Image();
image.src = "plumeria.jpg";
image.addEventListener("load", () => {
ctx.drawImage(image, 0, 0, 233, 320);
const imageData = ctx.getImageData(10, 20, 80, 230);
ctx.putImageData(imageData, 260, 0);
ctx.putImageData(imageData, 380, 50);
ctx.putImageData(imageData, 500, 100);
});
Ergebnis
Farbraumkonvertierung
Die optionale colorSpace
-Einstellung ermöglicht es Ihnen, Bilddaten im gewünschten Format zu erhalten.
const context = canvas.getContext("2d", { colorSpace: "display-p3" });
context.fillStyle = "color(display-p3 0.5 0 0)";
context.fillRect(0, 0, 10, 10);
// Get ImageData converted to sRGB
const imageData = context.getImageData(0, 0, 1, 1, { colorSpace: "srgb" });
console.log(imageData.colorSpace); // "srgb"
Spezifikationen
Specification |
---|
HTML Standard # dom-context-2d-getimagedata-dev |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Das Interface, das diese Methode definiert:
CanvasRenderingContext2D
ImageData
-ObjektCanvasRenderingContext2D.putImageData()
- Pixelmanipulation mit Leinwand