CanvasRenderingContext2D: getImageData() Methode

Syntax

getImageData(sx, sy, sw, sh)
getImageData(sx, sy, sw, sh, settings)

Parameter

sx

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

sy

Die y-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 gehen nach rechts, negative nach links.

sh

Die Höhe des Rechtecks, aus dem die ImageData extrahiert werden. Positive Werte zeigen 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.

pixelFormat

Gibt das Pixelformat an. Mögliche Werte:

• "rgba-unorm8" für RGBA mit 8 Bit pro Komponente im unsignierten normalisierten Format, verwendet ein Uint8ClampedArray.
• "rgba-float16" für RGBA mit 16 Bit pro Komponente, verwendet ein Float16Array. Gleitkomma-Pixelwerte ermöglichen die Darstellung von Farben in beliebig breiten Gamut-Bereichen und hohem dynamischen Bereich (HDR).

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 gleich null sind.

SecurityError DOMException

Das Canvas enthält oder könnte Pixel enthalten, die von einer anderen Ursprungsadresse geladen wurden als die, von der das Dokument selbst geladen wurde. Um zu verhindern, dass in diesem Fall eine SecurityError DOMException ausgelöst wird, konfigurieren Sie CORS so, dass die Quellbilder auf diese Weise verwendet werden können. Siehe Erlauben der plattformübergreifenden Verwendung von Bildern und Canvas.

Beispiele

Bilddaten von einem Canvas abrufen

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

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

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

Farbkonvertierung

Die optionale colorSpace-Einstellung erlaubt es, 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 verschiedenen Pixelformaten abrufen

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

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

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

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Das Interface, das diese Methode definiert: CanvasRenderingContext2D
• ImageData-Objekt
• CanvasRenderingContext2D.putImageData()
• Pixelmanipulation mit Canvas