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() des CanvasRenderingContext2D der Canvas 2D API gibt ein ImageData-Objekt zurück, das die zugrunde liegenden Pixel-Daten für einen angegebenen Teilbereich des Canvas darstellt.

Diese Methode wird nicht von der Transformationsmatrix des Canvas beeinflusst. Wenn das angegebene Rechteck die Grenzen des Canvas überschreitet, sind die Pixel außerhalb des Canvas im zurückgegebenen ImageData-Objekt transparent schwarz.

Hinweis: Bilddaten können mit der Methode putImageData() auf ein Canvas gemalt werden.

Sie können weitere Informationen über getImageData() und die allgemeine Manipulation von Canvas-Inhalten in Pixelmanipulation mit Canvas finden.

Syntax

js
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 werden.

sy

Die y-Achsen-Koordinate der oberen linken Ecke des Rechtecks, aus dem die ImageData extrahiert werden.

sw

Die Breite des Rechtecks, aus dem die ImageData extrahiert werden. Positive Werte nach rechts, negative nach links.

sh

Die Höhe des Rechtecks, aus dem die ImageData extrahiert werden. Positive Werte nach unten, negative nach oben.

settings Optional

Ein Objekt mit den folgenden Eigenschaften:

Rückgabewert

Ein ImageData-Objekt, das die Bilddaten für das angegebene Rechteck des Canvas 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 oder sh null sind.

SecurityError DOMException

Der Canvas enthält oder könnte Pixel enthalten, die von einem anderen Ursprung geladen wurden als der, von dem das Dokument selbst geladen wurde. Um das Auslösen einer SecurityError DOMException in dieser Situation zu vermeiden, konfigurieren Sie CORS, um zuzulassen, dass das Quellbild auf diese Weise verwendet werden darf. Siehe Erlauben der Cross-Origin-Verwendung von Bildern und Canvas.

Beispiele

Abrufen von Bilddaten aus einem Canvas

Dieses Beispiel zeichnet ein Bild und verwendet dann getImageData(), um einen Teil des Canvas zu erfassen.

Wir verwenden getImageData(), um einen Abschnitt des Bildes zu extrahieren, beginnend bei (10, 20), mit einer Breite von 80 und einer Höhe von 230. Wir zeichnen dann diesen Abschnitt dreimal und positionieren die Abschnitte jeweils unterhalb und rechts von dem vorherigen Abschnitt.

HTML

html
<canvas id="canvas" width="700" height="400"></canvas>

JavaScript

js
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 Einstellung colorSpace ermöglicht es Ihnen, Bilddaten im gewünschten Format zu erhalten.

js
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
# dom-context-2d-getimagedata-dev

Browser-Kompatibilität

Siehe auch