Die Methode getImageData
liefert ein
ImageData-Objekt,
das die zugrundeliegenden Pixel des Kontexts bzw. Canvas enthält. Die Dimension ergibt sich aus den übergebenen
Parametern w und h.
Die Methode wird erst ab ab JavaScript 1.7 (z.B. Firefox 2) unterstützt.
ImageData getImageData(x, y, w, h)
Die Methode erwartet vier Parameter.
Die folgende Abbildung zeigt, wo die übergebenen Grössen angetragen werden.
var objImg = new Image(); // IE if(document.all && !window.opera) window.onload = function(){ drawIt();}; // Sonstige else objImg.onload = function(){ drawIt();} 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'); objContext.drawImage(objImg, 0, 0); // Falls die benötigte Methode nicht verfügbar ist if(typeof objContext.getImageData != "function") return; var objImgData = objContext.getImageData(60, 60, 100, 100); objContext.putImageData(objImgData, 10, 10); }else{ // Sonstiger Code } }
Im Beispiel wird zuerst ein Bild in den Kontext gerendert. Anschliessend wird mit getImageData
ein
ImageData-Objekt
aus dem Bild entnommen und verschoben mit der Methode
putImageData
wieder eingesetzt.
Sehen sie keine Verschiebung eines Teils im Bild, unterstützt ihr Browser die Methoden getImageData
und putImageData
nicht.