HTML-Leinwand getImageData () -Methode
Beispiele
Die folgenden Code getImageData () Kopieren Sie auf Leinwand Rechteck Pixeldaten bezeichnet, und (), um die Bilddaten zurück in die Leinwand von putImageData:
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);
}
Versuchen »
Browser-Unterstützung
Internet Explorer 9, Firefox, Opera, Chrome und Safari Unterstützung getImageData () -Methode.
Hinweis: 8 und früher nternet Explorer das <canvas> -Element nicht unterstützt.
Definition und Verwendung
getImageData () Methode gibt Imagedata-Objekt, das eine Kopie der angegebenen rechteckigen Leinwand Pixeldaten.
Hinweis: Imagedata Objekt nicht das Bild ist, das einen Teil der Leinwand (Rechteck) bereitstellt, und in der Rechteckinformation jedes Pixels gespeichert.
Imagedata für jedes Pixel Objekt gibt es vier Bereiche von Informationen, nämlich die Werte RGBA:
R - rot (0-255)
G - Grün (0-255)
B - blau (0-255)
A - Alphakanal (0-255; 0 ist transparent, 255 vollständig sichtbar ist)
Farbe / Alpha - Informationen in Form eines Arrays und in Imagedata - Objekt gespeichert Daten Eigenschaften.
Tipp: Komplette Palette von Farb- / Alpha - Informationen in den Betrieb, können Sie putImageData () Methode der Bilddaten zurück auf die Leinwand kopiert.
Beispiel:
Der folgende Code erhalten werden Imagedata Objekt wird in der ersten Pixelfarbe / alpha Information zurückgegeben:
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
Tipp: Sie können auch getImageData () Methode verwenden , um die Farbe jedes Pixel eines Bildes auf der Leinwand umkehren.
Verwenden Sie diese Formel durch alle Pixel, und seine Farbwerte zu ändern:
green=255-old_green;
blue=255-old_blue;
Schauen Sie sich die folgenden "versuchen" Instanz!
JavaScript-Syntax
| JavaScript-Syntax: | Kontext .getImageData (x, y, Breite, Höhe); |
|---|
Parameter Wert
| 参数 | 描述 |
|---|---|
| x | 开始复制的左上角位置的 x 坐标（以像素计）。 |
| y | 开始复制的左上角位置的 y 坐标（以像素计）。 |
| width | 要复制的矩形区域的宽度。 |
| height | 要复制的矩形区域的高度。 |
Weitere Beispiele
Das Bild, das Sie verwenden möchten:
Beispiele
Verwenden Sie getImageData (), um die Farbe jedes Pixels des Bildes auf der Leinwand umkehren:
JavaScript:
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);
Versuchen »