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

sh

Die Höhe des Rechtecks, aus dem die ImageData extrahiert wird. Positive Werte gehen nach unten, 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 nicht-signierten normierten Format, wobei ein Uint8ClampedArray verwendet wird.
• "rgba-float16", für RGBA mit 16 Bit pro Komponente, wobei ein Float16Array verwendet wird. Gleitkomma-Pixelwerte ermöglichen die Darstellung von Farben in beliebig breiten Farbräumen und hohem Dynamikumfang (HDR).

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 sw oder sh null ist.

SecurityError DOMException

Die Leinwand enthält oder kann Pixel enthalten, die aus einem Ursprung geladen wurden, der nicht jener ist, von dem das Dokument selbst geladen wurde. Um zu vermeiden, dass in diesem Fall eine SecurityError DOMException ausgelöst wird, konfigurieren Sie CORS so, dass das Quellbild in dieser Weise verwendet werden darf. Siehe Freigabe von Bildern und Canvas für die Verwendung zwischen verschiedenen Ursprüngen.

Beispiele

Bilddaten aus einem Canvas abrufen

Dieses Beispiel zeichnet ein Bild und verwendet dann getImageData(), um einen Abschnitt der Leinwand zu erfassen.

Wir verwenden getImageData(), um einen Teil des Bildes zu extrahieren, der bei (10, 20) beginnt und eine Breite von 80 und eine Höhe von 230 hat. Wir zeichnen diesen Abschnitt dann dreimal und positionieren 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 verschiedenen Pixelformaten abrufen

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