Graufilter
JavaScript/CSS (Canvas, Filter) - Quaese - Deutschsprachige Dokumentation zum HTML5-Element <canvas>

Beispiel

setGrayScale

Funktionsweise

Das Script wandelt ein Bild in sein Graustufen-Pendant um. Hierfür werden zwei unterschiedliche Vorgehensweisen verwendet.

Internet Explorer (IE)

Der IE unterstützt seit Version 5.5 die filter-Eigenschaft mit der Option grayScale. Diese ermöglicht eine Graustufendarstellung einer Grafik.

filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=0);

Die Grafik, die manipuliert werden soll, wird innerhalb eines canvas-Elements notiert. Dieser Inhalt wird ähnlich dem iframe-Element nur dann angezeigt, wenn das Anzeigegerät das umschliessende Element nicht unterstützt.

<canvas id="canvas_id" width="280" height="210"><img id="canvas_id_img" src="distel.jpg" alt=""></canvas>

Die ID des img-Elements setzt sich aus der ID des canvas-Elements und dem Postfix _img zusammen.

Moderne Browser / Canvas-Element

In modernen Browsern ist bereits das HTML5-Element canvas integriert. Werden hier zusätzlich die Methoden getImageData und putImageData zur Pixelmanipulation unterstützt, ist die Umsetzung eines Graufilters möglich.

function drawIt(strCanvasId){
  var objCanvas = document.getElementById(strCanvasId);
  // Falls das Objekt unterstützt wird
  if(objCanvas.getContext){
    // Kontext
    var objContext = objCanvas.getContext('2d');

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

    // Inhalt Kontextes bzw. des Bildes in ImageData
    var objImgData = objContext.getImageData(0, 0, Math.min(objCanvas.width, objImg.width), Math.min(objCanvas.height, 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, 0, 0);

    // Neu-Rendern erzwingen (wg. FF 2.x)
    objCanvas.style.visibility = "hidden";
    window.setTimeout(function(){objCanvas.style.visibility = "visible";}, 1);
  }else{
    // Sonstiger Code
  }
}

Das Script setzt ein canvas-Element mit der ID canvas_id voraus. Weiterhin wurde mit der Methode drawImage bereits eine Grafik in die linke obere Ecke des Contexts gezeichnet. Eine Refenenz auf dieses Bildobjekt ist in der globalen Variable objImg gespeichert.

Weitere Informationen zum Canvas-Element gibt es hier.

Browserunterstützung

1. Internet Explorer (ab 5.5)
2. Firefox ab Version 2
3. Opera ab Version 9.5
4. Seamonkey 1.1.7
5. Google Chrome (nicht getestet)
6. Safari (Win) (derzeit nicht unterstützt)