HTML-Leinwand getImageData() Methode
Beispiel
Der folgende Code kopiert die Pixeldaten für ein bestimmtes Rechteck auf der Leinwand mit getImageData() und legt dann die Bilddaten mit putImageData() wieder auf der Leinwand ab:
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);
}
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die das Verfahren vollständig unterstützt.
| Method | |||||
|---|---|---|---|---|---|
| getImageData() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definition und Verwendung
Die getImageData()-Methode gibt ein ImageData-Objekt zurück, das die Pixeldaten für das angegebene Rechteck auf eine Leinwand kopiert.
Hinweis: Das ImageData-Objekt ist kein Bild, es gibt einen Teil (Rechteck) auf der Leinwand an und enthält Informationen zu jedem Pixel innerhalb dieses Rechtecks.
Für jedes Pixel in einem ImageData-Objekt gibt es vier Informationen, die RGBA-Werte:
R - Die Farbe Rot (von 0-255)
G - Die Farbe Grün (von 0-255)
B - Die Farbe Blau (von 0-255)
A - Der Alpha-Kanal (von 0-255; 0 ist transparent und 255 ist vollständig sichtbar)
Die Farb-/Alpha-Informationen werden in einem Array gespeichert und in der data- Eigenschaft des ImageData-Objekts gespeichert.
Tipp: Nachdem Sie die Farb-/Alpha-Informationen im Array manipuliert haben, können Sie die Bilddaten mit der Methode putImageData() wieder auf die Leinwand kopieren .
Beispiel:
Der Code zum Abrufen von Farb-/Alpha-Informationen des ersten Pixels im zurückgegebenen ImageData-Objekt:
red = imgData.data[0];
green = imgData.data[1];
blue = imgData.data[2];
alpha = imgData.data[3];
Tipp: Sie können auch die Methode getImageData() verwenden, um die Farbe aller Pixel eines Bildes auf der Leinwand umzukehren.
Durchlaufen Sie alle Pixel und ändern Sie die Farbwerte mit dieser Formel:
red = 255-old_red;
green = 255-old_green;
blue = 255-old_blue;
Unten finden Sie ein „Probieren Sie es selbst“-Beispiel!
JavaScript-Syntax
| JavaScript-Syntax: | Kontext .getImageData( x, y, Breite, Höhe ); |
|---|
Parameterwerte
| Parameter | Description |
|---|---|
| x | The x coordinate (in pixels) of the upper-left corner to start copy from |
| y | The y coordinate (in pixels) of the upper-left corner to start copy from |
| width | The width of the rectangular area you will copy |
| height | The height of the rectangular area you will copy |
Mehr Beispiele
Zu verwendendes Bild:
Beispiel
Verwenden Sie getImageData(), um die Farbe aller 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);
❮ Canvas-Objekt