CanvasRenderingContext2D: getImageData() Methode

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, negative nach links.

sh

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

settings Optional

Ein Objekt mit den folgenden Eigenschaften:

colorSpace

Bestimmt den Farbraum der Bilddaten. Kann auf "srgb" für den sRGB-Farbraum oder "display-p3" für den display-p3-Farbraum gesetzt werden.

pixelFormat

Bestimmt das Pixelformat. Mögliche Werte:

• "rgba-unorm8", für RGBA mit 8 Bit pro Komponente in einem unbegrenzten normalisierten Format, unter Verwendung eines Uint8ClampedArray.
• "rgba-float16", für RGBA mit 16 Bit pro Komponente, unter Verwendung eines Float16Array. Gleitkomma-Pixelwerte ermöglichen die Darstellung von Farben in beliebig breiten Farbräumen und mit hohem Dynamikbereich (HDR).

Rückgabewert

Ein ImageData-Objekt, das die Bilddaten für das spezifizierte 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 als dem, von dem das Dokument selbst geladen wurde, geladen wurden. Um zu vermeiden, dass in diesem Fall ein SecurityError DOMException ausgelöst wird, konfigurieren Sie CORS so, dass die Quellbildnutzung auf diese Weise erlaubt ist. Siehe Erlauben der Nutzung von Bildern und Canvas über Ursprungsgrenzen hinweg.

Beispiele

Bilddaten von einem Canvas holen

In diesem Beispiel wird ein Bild gezeichnet und dann getImageData() verwendet, 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 platzieren die Abschnitte progressiv unterhalb und rechts vom letzten Abschnitt.

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"

Daten in unterschiedlichen Pixelformaten erhalten

Die optionale pixelFormat-Einstellung ermöglicht es Ihnen, Bilddaten im gewünschten Pixelformat zu erhalten.

const context = canvas.getContext("2d");

const defaultImageData = context.getImageData(0, 0, 1, 1);
console.log(defaultImageData.pixelFormat); // "rgba-unorm8"

const float16ImageData = context.getImageData(0, 0, 1, 1, {
  pixelFormat: "rgba-float16",
});
console.log(float16ImageData.pixelFormat); // "rgba-float16"

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Die Schnittstelle, die diese Methode definiert: CanvasRenderingContext2D
• ImageData Objekt
• CanvasRenderingContext2D.putImageData()
• Pixelmanipulation mit Canvas