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

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

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 oder sh 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

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 colorSpace-Einstellung 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 Standard
# dom-context-2d-getimagedata-dev

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch