Beispiel
Der folgende Code kopiert die Pixeldaten für einen festgelegten Rechteck auf der Leinwand mit getImageData() , und setzen Sie dann die Bilddaten zurück auf die Leinwand mit putImageData() :
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
} Versuch es selber " Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Methode in vollem Umfang unterstützt.
| Methode | |||||
|---|---|---|---|---|---|
| getImageData() | ja | 9.0 | ja | ja | ja |
Definition und Verwendung
Die getImageData() Methode gibt ein Imagedata - Objekt , das kopiert die Pixeldaten für das angegebene Rechteck auf einer Leinwand.
Hinweis: Die Imagedata - Objekt kein Bild ist, gibt es einen Teil (Rechteck) auf der Leinwand, und hält Informationen von jedem Pixel innerhalb dieses Rechtecks.
Für jedes Pixel in einem Imagedata Objekt gibt es vier Teile von Informationen, die RGBA-Werte:
R - Die Farbe Rot (0-255)
G - Die Farbe Grün (0-255)
B - Die Farbe Blau (0-255)
A - Der Alphakanal (0-255; 0 ist transparent und 255 vollständig sichtbar ist)
Die Farbe / alpha Information wird in einem Feld gehalten und in den gespeicherten data - Eigenschaft des Objekt Imagedata.
Tipp: Nachdem Sie die Farbe / Alpha - Informationen in dem Array manipuliert haben, können Sie die Bilddaten zurück auf die Leinwand mit dem Kopieren putImageData() Methode.
Beispiel:
Der Code für das Erhalten Farbe / Alpha-Informationen des ersten Pixels in der zurückImageData-Objekt:
red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
Versuch es selber " Tipp: Sie können auch die Verwendung getImageData() Methode , um die Farbe jedes Pixel eines Bildes auf der Leinwand zu invertieren.
Schleife durch alle Pixel und die Farbwerte ändern, um diese Formel:
red=255-old_red;
green=255-old_green;
blue=255-old_blue;
Siehe unten für eine "Versuchen Sie es selbst" Beispiel!
JavaScript-Syntax
| JavaScript-Syntax: | context.getImageData(x,y,width,height); |
|---|
Parameterwerte
| Parameter | Beschreibung |
|---|---|
| x | Die x-Koordinate (in Pixeln) der oberen linken Ecke zu starten Kopie von |
| y | Die y-Koordinate (in Pixeln) der oberen linken Ecke zu starten Kopie von |
| width | Die Breite des rechteckigen Bereichs kopiert Sie |
| height | Die Höhe des rechteckigen Bereichs kopiert Sie |
Mehr Beispiele
Bild zu verwenden:
Beispiel
Verwenden Sie getImageData() die Farbe der einzelnen Pixel eines Bildes auf der Leinwand 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);
// invert colors
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); Versuch es selber "