Die CanvasRenderingContext2D
.getImageData()
Methode der Canvas 2D API gibt ein Objekt des Types ImageData
zurück. Dieses Objekt repräsentiert die jeweiligen Pixel-Daten im Bereich des Rechtecks mit den Startkoordinaten (sx,sy) und den Dimensionen sw in der Breite und sy in der Höhe.
Syntax
ImageData ctx.getImageData(sx, sy, sw, sh);
Parameters
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.
Rückgabewerte
Ein Objekt vom Typ ImageData
das die Pixeldaten im angegeben bereich des Canvas-Elements beinhaltet.
Fehlertypen
IndexSizeError
- Tritt ein, wenn entweder das Höhen oder das Breiten Argument null ist.
Beispiele
Benutzung der getImageData
Funktion
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
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] }
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard Die Definition von 'CanvasRenderingContext2D.getImageData' in dieser Spezifikation. |
Lebender Standard |
Browser Kompatibilität
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | (Ja) | (Ja) | (Ja) [1] | (Ja) | (Ja) | (Ja) |
Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | (Ja) | (Ja) | (Ja) | (Ja) [1] | (Ja) | (Ja) | (Ja) |
[1] Ab (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) unterstützt getImageData()
die Angabe von Rechtecken, die die Ränder des Canvas-Elements überschreiten. Die Pixel, die außerhalb des Elementes liegen, werden als transparentes Schwarz zurückgegeben. Auch wenn die größe des Rechtecks kleiner als eins ist wird jetzt mindestens ein Pixel als Pixel-Daten zurückgegeben.
Sehen Sie auch
- Das Interface zur Definition,
CanvasRenderingContext2D
. ImageData
- Pixel manipulation with canvas