Schnittstellen/Objekte - ImageData
ImageData ist ein Objekt, das die eigentlichen Pixel(daten) repräsentiert. Einbezogen
werden alle Pixel im Kontext innerhalb eines Rechtecks, das durch width und height beschrieben
wird.
Im Allgemeinen wird ein derartiges Objekt als Rückgabetyp von Methoden (z.B. getImageData) erzeugt.
Attribute und Methoden
Objekte vom Typ ImageData besitzen lediglich Attribute - width, height und data.
Attribute
width und height
ImageData-Objekte müssen derart initialisiert werden, dass ihre Breite width der
Anzahl der physikalischen Pixel des Anzeigebereichs in einer Zeile entspricht. Ihre Höhe height
muss analog der Anzahl der Zeilen entsprechen.
data
Beim data-Attribut handelt es sich um ein Array mit width*height*4
Integerwerten, das die Informationen zu den einzelnen Pixeln enthält. Die Reihenfolge der Pixel
geht von links nach rechts und von Zeile zu Zeile, beginnend in der linken oberen Ecke. Jedes Pixel
wird dabei durch die Werte rot, grün, blau und Alphakomponente (in dieser Reihenfolge)
repräsentiert. Dabei muss jeder Wert im Bereich von 0..255 liegen - das entspricht einem 8-Bit-Wert.
Das erste Pixel entspricht: r=data[0], g=data[1], b=data[2], a=data[3],
das zweite Pixel: r=data[4], g=data[5], b=data[6], a=data[7],
usw.
Daraus folgt, dass beim Durchlaufen der Pixel mit einem (Zähl-)Offset von 4 gearbeitet werden muss.
Beispiel
Das Beispiel funktioniert wegen der Methode getImageData erst ab JavaScript 1.7 (z.B. Firefox 2).
var objImg = new Image();
objImg.src = "bild.jpg";
function drawIt(){
var objCanvas = document.getElementById("canvas_id");
// Falls das Objekt unterstützt wird
if(objCanvas.getContext){
// Kontext
var objContext = objCanvas.getContext("2d");
// Pattern-Objekt (CanvasPattern) erstellen
objContext.drawImage(objImg, 0, 0);
// Falls die benötigte Methode nicht verfügbar ist
if(typeof objContext.getImageData != "function") return;
var objImageData = objContext.getImageData(0, 0, objImg.width, objImg.height);;
alert("Pixel an (0,0): rgba("+objImageData.data[0]+", "+objImageData.data[1]+", "+objImageData.data[2]+","+objImageData.data[3]+")");
}else{
// Sonstiger Code
}
}
window.onload = drawIt;
Erläuterung
Zunächst wird im Kontext mit Hilfe der Methode drawImage ein bereits geladenes Bild gezeichnet.
Zu diesem Bild wird im Anschluss durch den Aufruf von getImageData ein ImageData-Objekt
zurück geliefert, das die Abmessungen des Ausgangsbildes besitzt. Zu Demonstrationszwecken werden zum Schluss
noch die Informationen des ersten Pixels angezeigt.