Canvas - HTML5 - page 152

Das ImageData -Objekt selbst besitzt die Attribute ImageData.width , ImageData
.height und ImageData.data , wobei sich hinter Letzterem die tatsächlichen Pi-
xelwerte im sogenannten CanvasPixelArray verstecken. Dabei handelt es sich
um ein flaches Array mit Rot-, Grün-, Blau- und Alpha-Werten für jedes Pixel
im gewählten Ausschnitt, beginnend links oben, von links nach rechts und von
oben nach unten. Die Anzahl aller Werte ist im Attribut ImageData.data.length
gespeichert.
Mithilfe einer einfachen for -Schleife können wir nun die einzelnen Werte des
CanvasPixelArray auslesen und mit alert() sichtbar machen. Beginnend bei 0 ,
arbeiten wir uns von Pixel zu Pixel vor, indem wir nach jedem Schleifendurch-
gang den Zähler um 4 erhöhen. Die RGBA-Werte ergeben sich dann über Off-
sets von der aktuellen Position aus, wobei Rot beim Zähler i , Grün bei i+1 , Blau
bei i+2 und die Alpha-Komponente bei i+3 zu finden ist.
for (var i=0; i<ImageData.data.length; i+=4) {
var r = ImageData.data[i];
var g = ImageData.data[i+1];
var b = ImageData.data[i+2];
var a = ImageData.data[i+3];
alert(r+" "+g+" "+b+" "+a);
}
Genau demselben Prinzip folgt das Modifizieren von Pixelwerten, indem wir
jetzt das CanvasPixelArray in-place durch Zuweisung neuer Werte verändern. In
unserem Beispiel werden die RGB-Werte mit Math.random() auf Zufallszahlen
zwischen 0 und 255 gesetzt; die Alpha-Komponente bleibt unberührt.
for (var i=0; i<ImageData.data.length; i+=4) {
ImageData.data[i] = parseInt(Math.random()*255);
ImageData.data[i+1] = parseInt(Math.random()*255);
ImageData.data[i+2] = parseInt(Math.random()*255);
}
Der Canvas erscheint nach diesem Schritt allerdings noch unverändert. Erst
durch Zurückschreiben des modifizierten CanvasPixelArray über die Methode
putImageData() werden die neuen Farben sichtbar. Beim Aufruf von putImage-
Data() sind maximal sieben Parameter erlaubt.
context.putImageData(
ImageData, dx, dy, [ dirtyX, dirtY, dirtyWidth, dirtyHeight ]
)