Das HTMLCanvasElement
bietet die Möglichkeit, Pixel-Manipulationen vorzunehmen. Dazu stehen
die Methoden
getImageData
und
putImageData
zur Verfügung. Mit der ersten Routine kann ein Bereich aus dem Kontext selektiert werden, der als
ImageData-Objekt
zurückgegeben wird. Über das
data-Attribut
des
ImageData-Objekts
können die einzelnen Pixel angesprochen und manipuliert werden. Mit der zweiten Methode kann der geänderte
Bereich wieder in den Kontext eingebracht werden.
Da das data
-Attribut zur Manipulation einzelner Pixel unerlässlich ist, soll es an dieser
Stelle kurz erläutert werden.
Es handelt sich bei der Eigenschaft um ein Array, das dem ImageData-Objekt zugeordnet ist.
Ein ImageData-Objekt enthält die Anzahl Pixel pro Zeile multipliziert mit der Zeilenanzahl.
Anzahl Pixel = Pixel pro Zeile (w) * Zeilenanzahl (h)
Jedes Pixel enthält Informationen zu Farbanteilen und Alphawert - rgba
-Werte. Das data
-Array
enthält für jedes Pixel vier Komponenten, um jede Information einzeln zu speichern (rot, grün, blau, alpha).
Der Wertebereich umfasst dabei die Integerwerte von 0 .. 255.
1.Pixel: rot=data[0], grün=data[1], blau=data[2], alpha=data[3] 2.Pixel: rot=data[4], grün=data[5], blau=data[6], alpha=data[7] ...
Die Komponenten werden im Feld hintereinander fortlaufend aufgelistet, es handelt sich also um ein eindimensionales Array mit der Grösse:
dim(Array) = 4*w*h
Die Abbildung zeigt die Zusammenhänge zwischen dem ImageData
-Objekt und der data
-Eigenschaft.
Die erste Vergrösserung zeigt zunächst das Pixelraster mit den Pixeln
P(m,n), m=0..w-1, n=0..h-1
In der zweiten Vergrösserung wird gezeigt, wie das Startoffset eines Pixels errechnet werden kann (=Index des Rotwertes des Pixels).
z = m*w*4 s = 4*n P(m,n)[rot] = data[z+s] P(m,n)[gruen] = data[z+s+1] P(m,n)[blau] = data[z+s+2] P(m,n)[alpha] = data[z+s+3]
m bezeichnet die Zeilennumer und n die Spaltennummer.
getImageData
- (Methode) Liefert die Pixeldaten des durch die Parameter beschriebenen RechtecksputImageData
- (Methode) Fügt Bildinformationen in den Kontext ein