CanvasRenderingContext2D.getImageData()

ImageData ctx.getImageData(sx, sy, sw, sh);

sx

Die x Koordinate der oberen linken Ecke des Rechtecks, aus welchem die Pixel-Daten gelesen werden.

sy

Die y Koordinate der oberen linken Ecke des Rechtecks, aus welchem die Pixel-Daten gelesen werden.

sw

Die Breite des Rechtecks aus dem die Pixel-Daten gelesen werden.

sh

Die Höhe des Rechtecks aus dem die Pixel-Daten gelesen werden.

Ein Objekt vom Typ ImageData (en-US) das die Pixeldaten im angegeben bereich des Canvas-Elements beinhaltet.

IndexSizeError

Tritt ein, wenn entweder das Höhen oder das Breiten Argument null ist.

Das ist ein einfaches Code-Beispiel zur Benutzung der getImageData Funktion. Für mehr Informationen siehe Pixel manipulation with canvas und die Referenz zum ImageData (en-US) Objekt.

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.rect(10, 10, 100, 100);
ctx.fill();

console.log(ctx.getImageData(50, 50, 100, 100));
// ImageData { width: 100, height: 100, data: Uint8ClampedArray[40000] }

• Das Interface zur Definition, CanvasRenderingContext2D.
• ImageData (en-US)
• Pixel manipulation with canvas