Dokumentation (canvas.quaese.de)
 

Pixel-Manipulation - getImageData()

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.

getImageData

ImageData getImageData(x, y, w, h)

Die Methode erwartet vier Parameter.

Parameter

x - Horizontale Koordinate der linken oberen Ecke

y - Vertikale Koordinate der linken oberen Ecke

w - Breite des Ausschnitts

h - Höhe des Ausschnitts

Rückgabe

ImageData - ImageData-Objekt

Schematische Darstellung

Die folgende Abbildung zeigt, wo die übergebenen Grössen angetragen werden.

getImageData()

Beispiel

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
  }
}

Erläuterung

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.

Anzeige

Sehen sie keine Verschiebung eines Teils im Bild, unterstützt ihr Browser die Methoden getImageData und putImageData nicht.

Ihr Browser unterstützt das canvas-Element leider nicht.

 
Dokument zuletzt modifiziert: 05.02.2008, 14:28 Uhr
<canvas>-Dokumentation Ver. 0.1 | Quaese, Jan 2008 | Datenschutz | Sitemap