Canvas - HTML5 - page 154

var imagedata = context.createImageData(2,2);
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);
}
context.putImageData(imagedata,0,0);

So viel zur nüchternen CanvasPixelArray -Theorie, die Praxis ist viel spannen-
der, denn mit getImageData() , putImageData() , createImageData() und etwas
Mathematik lassen sich sogar eigene Farbfilter zum Manipulieren von Bildern
schreiben. Wie das geht, zeigt der folgende Abschnitt.

5.8.2 Farbmanipulation mit »getImageData()«,

»createImageData()« und »putImageData()«

Das Musterbild für alle Beispiele ist wieder die Aufnahme aus dem Yosemite-
Nationalpark, die onload mit drawImage() auf den Canvas gezeichnet wird. In
einem zweiten Schritt definieren wir über getImageData() das originale Canvas-
PixelArray , das wir dann im dritten Schritt modifizieren. Dabei werden in einer
for -Schleife die RGBA-Werte jedes Pixels nach einer mathematischen Formel
neu berechnet und in ein zuvor über createImageData() erzeugtes CanvasPixel-
Array eingetragen, das wir am Ende mit putImageData() wieder auf den Canvas
zurückschreiben.

Listing 5.1 liefert das JavaScript-Grundgerüst für alle Filter, die in Abbildung
5.29 Verwendung finden. Die Funktion grayLuminosity() ist nicht Teil des Code-
Beispiels, sondern wird, wie alle anderen Filter, im Anschluss behandelt.
var image = new Image();
image.src = 'images/yosemite.jpg';
image.onload = function() {
context.drawImage(image,0,0,360,240);
var modified = context.createImageData(360,240);
var imagedata = context.getImageData(0,0,360,240);
for (var i=0; i<imagedata.data.length; i+=4) {
var rgba = grayLuminosity(
imagedata.data[i+0],
imagedata.data[i+1],
imagedata.data[i+2],
imagedata.data[i+3]
);