HTML-Canvas getImageData()-Methode

Beispiele

Der folgende Code kopiert die Pixeldaten eines angegebenen Rechtecks auf dem Canvas mit getImageData() und legt dann die Bilddaten mit putImageData() wieder auf den Canvas:

const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); ctx.fillStyle = "red"; ctx.fillRect(10, 10, 50, 50); function copy() { const imgData = ctx.getImageData(10, 10, 50, 50); ctx.putImageData(imgData, 10, 70); }

Selbst ausprobieren »

Browser-Unterstützung

Internet Explorer 9, Firefox, Opera, Chrome und Safari unterstützen die getImageData() Methode.

Hinweis:Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.

Definition und Verwendung

Die getImageData()-Methode gibt ein ImageData-Objekt zurück, das die Pixeldaten eines angegebenen Rechtecks auf dem Canvas kopiert.

Hinweis:Das ImageData-Objekt ist kein Bild; es gibt einen Teil (Rechteck) des Canvas an und speichert die Informationen jedes Pixels innerhalb dieses Rechtecks.

Für jedes Pixel im ImageData-Objekt gibt es vier Informationen, nämlich die RGBA-Werte:

R - Rot (0-255)
G - Grün (0-255)
B - Blau (0-255)
A - Alpha-Kanal (0-255; 0 ist transparent, 255 ist vollständig sichtbar)

Die Farb-/Alpha-Informationen liegen in Array-Form vor und werden in derdata-Eigenschaft des ImageData-Objekts gespeichert.

Tipp:Nachdem Sie die Farb-/Alpha-Informationen im Array bearbeitet haben, können Sie dieputImageData()-Methode verwenden, um die Bilddaten zurück auf den Canvas zu kopieren.

Beispiel:

Der folgende Code kann die Farb-/Alpha-Informationen des ersten Pixels im zurückgegebenen ImageData-Objekt abrufen:

red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];

Selbst ausprobieren

Tipp:Sie können auch die getImageData()-Methode verwenden, um die Farbe jedes Pixels eines Bildes auf dem Canvas zu invertieren.

Verwenden Sie diese Formel, um alle Pixel zu durchlaufen und ihre Farbwerte zu ändern:

red=255-old_red;
green=255-old_green;
blue=255-old_blue;

Siehe das Beispiel „Try it yourself“ unten!

JavaScript-Syntax

JavaScript-Syntax:	context.getImageData(x,y,width,height);

Parameterwerte

Parameter	Beschreibung
x	Die x-Koordinate (in Pixeln) der Position der oberen linken Ecke, an der das Kopieren beginnt.
y	Die y-Koordinate (in Pixeln) der Position der oberen linken Ecke, an der das Kopieren beginnt.
width	⟦⟧Die Breite des rechteckigen Bereichs, der kopiert werden soll.
height	Die Höhe des rechteckigen Bereichs, der kopiert werden soll.

Weitere Beispiele

Zu verwendendes Bild:

The Scream

Beispiel

Verwenden Sie getImageData(), um die Farbe jedes Pixels des Bildes auf dem Canvas zu invertieren:

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
// Farben invertieren
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i]=255-imgData.data[i];
imgData.data[i+1]=255-imgData.data[i+1];
imgData.data[i+2]=255-imgData.data[i+2];
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,0,0);