Dokumentation (canvas.quaese.de)

Pixel-Manipulation - putImageData()

Die Methode putImageData kann ein ImageData-Objekt, in den Kontext eingefügt werden. Die Position wird durch die übergebenen Parametern x und y bestimmt.

Die Methode wird erst ab ab JavaScript 1.7 (z.B. Firefox 2) unterstützt.

putImageData

void putImageData(ImageData, x, y)

Die Methode erwartet drei Parameter.

Parameter

ImageData - ImageData-Objekt

x - Horizontale Koordinate der linken oberen Ecke

y - Vertikale Koordinate der linken oberen Ecke

Schematische Darstellung

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

putImageData()

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');

    // Bild in Kontext rendern
    objContext.drawImage(objImg, 0, 0);

    // Falls die benötigte Methode nicht verfügbar ist
    if(typeof objContext.putImageData != "function") return;

    // Horizontale Hälfte des Kontextes in ImageData
    var objImgData = objContext.getImageData(parseInt(objImg.width/2), 0, parseInt(objImg.width/2), objImg.height);

    // Farbwert-Variable
    var intCol = 0;

    // data-Array durchlaufen
    for(var i=0; i<objImgData.data.length; i++){

      // Falls die alpha-Komponente erreicht wurde
      if(i%4 == 3){
        // Farbmittelwert eines Pixels ermitteln
        intCol = parseInt(intCol/3);
        // Farbkomponenten eines Pixel Mittelwert setzen
        objImgData.data[i-3] = objImgData.data[i-2] = objImgData.data[i-1] = intCol;
        // Farbwert-Variable zurücksetzen
        intCol = 0;
      }else{
        // Farbwerte addieren
        intCol += objImgData.data[i];
      }
    }

    // ImageData als s/w-Variante wieder in Kontext setzen
    objContext.putImageData(objImgData, parseInt(objImg.width/2), 0);
  }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. Dieses Objekt wird pixelweise durchlaufen. Von jedem Pixel wird der Mittelwert der drei Farbwerte ermittelt und jeder Farbkomponente zugewiesen. Zum Schluss wird eine Schwarz-Weiss-Variante des ImageData-Objekts in den Kontext zurückgezeichnet.