CanvasRenderingContext2D: getImageData() Methode

sx

Die x-Achsen-Koordinate der oberen linken Ecke des Rechtecks, von dem das ImageData extrahiert wird.

sy

Die y-Achsen-Koordinate der oberen linken Ecke des Rechtecks, von dem das ImageData extrahiert wird.

sw

Die Breite des Rechtecks, von dem das ImageData extrahiert wird. Positive Werte sind nach rechts, und negative nach links.

sh

Die Höhe des Rechtecks, von dem das ImageData extrahiert wird. Positive Werte sind 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 unbeschnittenen normalisierten Format, mit einer Uint8ClampedArray.
  • "rgba-float16", für RGBA mit 16 Bit pro Komponente, mit einer Float16Array. Gleitkomma-Pixelwerte ermöglichen die Darstellung von Farben in beliebig breiten Farbumfängen und hohem Dynamikbereich (HDR).

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.

IndexSizeError DOMException

Wird ausgelöst, wenn entweder sw oder sh null sind.

SecurityError DOMException

Das Canvas enthält oder könnte Pixel enthalten, die von einem anderen Ursprung geladen wurden als dem, 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 ermöglichen. Siehe Verwendung von CORS-fähigen Bildern und Canvas erlauben.

Dieses Beispiel zeichnet ein Bild und verwendet dann getImageData(), um einen Teil des Canvas 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 und positionieren die Ausschnitte schrittweise unter und rechts von dem letzten Ausschnitt.

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

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"

Die optionale pixelFormat-Einstellung ermöglicht es Ihnen, 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"

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