Dokumentation (canvas.quaese.de)
 

<canvas> - Pixel-Manipulation

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.

data-Attribut

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

Schematische Darstellung

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.

ImageData

Attribute und Methoden

  • getImageData - (Methode) Liefert die Pixeldaten des durch die Parameter beschriebenen Rechtecks
  • putImageData - (Methode) Fügt Bildinformationen in den Kontext ein
 
Dokument zuletzt modifiziert: 12.05.2010, 18:48 Uhr
<canvas>-Dokumentation Ver. 0.1 | Quaese, Jan 2008 | Datenschutz | Sitemap