HTML Canvas getImageData() Methode

HTML5 Canvas Reference Manual

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 als Array 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:

Nachfolgender Code ermöglicht den Zugriff auf die color/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];

Try It Yourself

Hinweis:Sie können auch das getImageData()-Verfahren verwenden, um die Farben jedes Pixels eines bestimmten Bildes auf dem Bildschirm umzukehren.

Verwenden Sie das folgende Formula, um alle Pixel zu durchsuchen und deren Farbwerte zu ändern:

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

(Siehe untenstehendes "Selbst ausprobieren"-Beispiel.)

Beispiel

Beispiel 1

Das folgende Code kopiert die Pixeldaten eines bestimmten Rechtecks auf dem Canvas mithilfe von getImageData() und gibt die Bilddaten mit 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);
}

Try It Yourself

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 zu kopierenden Bereichs.
y y-Koordinate der linken oberen Ecke des zu kopierenden Bereichs.
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() zum Umkehren der Farben jedes Pixels auf dem Bildschirm.

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

Try It Yourself

Browser Support

The numbers in the table indicate the first browser version that fully supports this attribute.

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

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

HTML5 Canvas Reference Manual