Beispiel
Der folgende Code kopiert die Pixeldaten für ein angegebenes 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 vollständig unterstützt.
| Methode | |||||
|---|---|---|---|---|---|
| getImageData() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definition und Verwendung
Die getImageData() Methode liefert eine Imagedata - Objekt , die Kopien der Pixeldaten für den angegebenen Rechteck auf eine Leinwand.
Note: Das Imagedata Objekt nicht ein Bild ist, gibt es einen Teil (rectangle) auf der Leinwand, und hält Daten von jedem Pixel innerhalb dieses Rechtecks.
Für jedes Pixel in einem Imagedata-Objekt gibt es vier Stücke von Informationen, die RGBA-Werte:
R - Die Farbe Rot (from 0-255)
G - Die Farbe Grün (from 0-255)
B - Die Farbe Blau (from 0-255)
A - Der Alphakanal (from 0-255; 0 is transparent and 255 is fully visible)
Die Farb- / Alpha - Information wird in einer Anordnung gehalten wird , und wird in der gespeicherten Daten - Eigenschaft des Objekts Imagedata.
Tip: Nachdem Sie die Farbe / Alpha - Informationen in dem Array manipuliert haben, können Sie die Bilddaten zurück auf die Leinwand mit der Kopieren putImageData() Methode.
Example:
Der Code für das Erhalten Farbe / Alpha-Informationen des ersten Pixels in dem zurückImageData-Objekt:
red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
Tip: 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 ändern sich die Farbwerte unter Verwendung folgender Formel:
red=255-old_red;
green=255-old_green;
blue=255-old_blue;
Siehe unten für ein "Try it Yourself" Sie "Try it Yourself" Beispiel!
JavaScript-Syntax
| JavaScript-Syntax: | context . getImageData( x,y,width,height ) ; |
|---|
Parameterwerte
| Parameter | Beschreibung |
|---|---|
| x | Die x - Koordinate (in pixels) der oberen linken Ecke beginnen Kopie von |
| y | Die y - Koordinate (in pixels) der oberen linken Ecke beginnen Kopie von |
| width | Die Breite des rechteckigen Bereichs kopieren Sie |
| height | Die Höhe des rechteckigen Bereichs kopieren Sie |
Mehr Beispiele
Bild zu verwenden:
Beispiel
Verwenden getImageData() die Farbe jedes 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 " <Canvas Object