CanvasRenderingContext2D.getImageData()

Die CanvasRenderingContext2D.getImageData() Methode der Canvas 2D API gibt ein Objekt des Types  ImageData (en-US) 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 (en-US) 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 (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] }

Specifications

Specification Status Comment
HTML Living Standard
Die Definition von 'CanvasRenderingContext2D.getImageData' in dieser Spezifikation.		 Lebender Standard  

Browser Kompatibilität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst! (en-US)

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