Canvas getImageData() Methode

Canvas-Referenzhandbuch

Definition und Verwendung

getImageData() Die Methode gibt ein ImageData-Objekt zurück, das die Pixeldaten des angegebenen Rechtecks auf der Leinwand kopiert.

Für jedes Pixel im ImageData-Objekt gibt es vier Arten von 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 vollständig sichtbar)

color/alpha existiert in Form eines Arrays und wird im ImageData-Objekt gespeichert: data Eigenschaft verwenden.

Hinweis:Nachdem Sie die color/alpha-Informationen im Array bearbeitet haben, können Sie putImageData() Die Methode kopiert die Bilddaten zurück auf die Leinwand.

Beispiel:

Nachstehender Code kann die color/alpha-Informationen des ersten Pixels des zurückgegebenen ImageData-Objekts abrufen:

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

Versuchen Sie es selbst

Hinweis:Sie können auch die Methode getImageData() verwenden, um die Farben jedes Pixels einer bestimmten Bildfläche umzukehren.

Verwenden Sie diese Formel, um alle Pixel zu durchsuchen und deren Farbwerte zu ändern:

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

Bitte siehe untenstehende "Selbst ausprobieren"-Beispiel.

Beispiel

Beispiel 1

Das folgende Code kopiert die Pixeldaten eines bestimmten Rechtecks auf dem Canvas durch getImageData() und kehrt sie durch putImageData() zurück auf den Canvas:

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);
}

Versuchen Sie es selbst

Hinweis:Mehr Beispiele am Seitenende.

Syntax

var imgData = context.getImageData(x,y,width,height);

Parameterwert

Parameter Beschreibung
x x-Koordinate der linken oberen Ecke des Startkopierorts.
y y-Koordinate der linken oberen Ecke des Startkopierorts.
width Breite des zu kopierenden Rechtecks.
height Höhe des zu kopierenden Rechtecks.

Mehr Beispiele

Beispiel 2

Zu verwendendes Bild:

Die Tulpe

Verwenden Sie getImageData(), um die Farben jedes Pixels auf dem Canvas umzukehren.

Ihr Browser unterstützt das HTML5 Canvas-Tag nicht.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("tulip");
ctx.drawImage(img, 0, 0);
var imgData=ctx.getImageData(0, 0, c.width, c.height);
// Farben umkehren
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 Sie es selbst

Browser-Unterstützung

Die Zahlen in der Tabelle weisen auf die erste Browser-Version hin, die diese Eigenschaft vollständig unterstützt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

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

Canvas-Referenzhandbuch