Pixel-Filter mit Canvas

Pixel-Filter mit Canvas


Original

Helligkeit

Kontrast

RGB-Auszüge

CMY-Auszüge

Grau, Negativ, Spiegelung

Experimente

Bildbearbeitung mit Canvas

Nur das Original-Bild wurde als Grafik-Datei (2464 Byte) vom Webserver angefordert, zu ihrem PC übertragen und in diese Webseite eingebettet.
Quelle: Wikimedia-Commons (Maler: Jan Vermeer, 1632-1675).

Alle anderen Bilder wurden Live mit Programmen der Programmiersprache → Javascript berechnet und das Ergebnis in je 1 HTML <canvas>-Element eingebettet.
Jedes der dazu verwendeten Programme braucht dazu nur ca. 400 Byte Quelltext.
Die Live-Messung der Rechenzeit an ihrem Arbeits-PC ergab:
Rechenzeit: 0ms = 0ms/Bild

Die Live-Berechnung ist allgemeiner und flexibler als die Verwaltung vieler einzelner Grafik-Dateien. Außerdem kann man die gleichen Canvas-Programme nach 1maligem Laden auf beliebig viele Bilder anwenden.

Die Anwendung lässt sich interaktiv gestalten: Es werden dann nur die jeweils gewünschten Bilder berechnet.

Die Einsparung von Resourcen am Server-PC ist besonders wertvoll:
Für diese Webseite wird nur 1 Bild (2.4kiB) und die Javascript-Programme (5kiB) angefordert.
Andernfalls müsste man die 16 hier erzeugten Bilder am Server speichern und auf Anfrage einzeln zu jedem Client transportieren.
Der geringe Aufwand für die Programme ist konstant, jener für Grafik-Dateien nimmt jedoch mit der Größe rasch zu.
Die Einsparung von Server-Zeit nutzt allen Clients: Es stehen mehr Resourcen auch für jene AnwenderInnen zur Verfügung, die keine Canvas-Filter verwenden.

Canvas erzeugt Pixel-Grafik: Man kann jedes Bild mit RechtsKlick als Grafik-Datei *.png am eigenen Arbeits-PC speichern.

Für gängige Programme zur manuellen Bild-Bearveitung (z.B. → GIMP) werden im Internet unzählige Filter angeboten. Schon mäßig fortgeschrittene EntwicklerInnen können die meisten dieser Filter mit wenigen Zeilen Javascript für Canvas adaptieren.

Verwandte Themen: Formate von Grafik-Dateien, Vergleich RGB-CMY, RGB, CMY, HSB, Index-Farben, Canvas

HTML


Das <img>-Element muss ein eindeutiges id-Attribut enthalten, damit man es später mit Javascript adressieren kann.

Das Bild muss zwar in das <img>-Element geladen werden, man kann es jedoch mit der → CSS-Eigenschaft display=none 'unsichtbar' laden und nur die mit Canvas bearbeiteten Kopien anzeigen.


Jedes <canvas>-Element sollte alle 3 hier angegebenen Attribute enthalten:

Das id-Attribut jedes Canvas-Elements muss eindeutig sein und dient zur Adressierung des Elerments mit Javascript.

Die Größe in Bildpunkten (Pixeln) wird für aktuelle Browser-Programme besser mit den Attributen width und height programmiert, nicht mit CSS.

Javascript


Mit den Variablen w,h wird Breite und Höhe der Grafik vorgegeben (hier 100x100 Pixel).

Mit Funktion get_source_image() wird die Original-Grafik-bezeichnet, die als Eingang (Muster, Vorgabe) zu verwenden ist. Als Argument wird das id-Attribut des <img>-Elements verwendet.

Alle 6 hier gezeigten Auszüge (R,G,B,C,M,Y) werden mit der gleichen Funktion pixel_rgb_filter() berechnet.


Diese Funktion ist ein typisches Beispiel für die Verarbeitung einer Pixel-Grafik zu einem neuen ('gefilterten') Produkt:
function pixel_rgb_filter(id,w,h,rgbnr,default_value) {
ctx = document.getElementById(id).getContext('2d');
ctx.drawImage(source_image,0,0);
var imga = ctx.getImageData(0,0,w,h);
for(var i=0;i<imga.data.length;i+=4) {
for(var j=0;j<3;j++) {
if(j!=rgbnr) {imga.data[i+j]=default_value;}
}
}
ctx.putImageData(imga,0,0);
}

Argumente:
id...id-Attribut des Canvas-Elements (Ausgabe)
w....Breite in Pixeln
h....Höhe in Pixeln
0....rgbnr...2   Beibehaltener Farb-Wert (0=>R, 1=>G, 2=>B)
default_value   (0=>RGB-Auszug, 255=>CMY-Auszug)
Anfangs wird das Grafik-Objekt (Context) des mit seinem id-Attribut identifizierten Canvas-Elements an die Variable ctx zugewiesen.

Die Original-Grafik (source_image) wird mit Methode drawImage() an der Position (0,0) in das Canvas-Element kopiert. Wenn man nun abbricht, enthält das Canvas-Element eine exakte Kopie der Original-Grafik.

Mit Methode getImageData() werden die RGBA-Daten aller Pixel an ein Array zugewiesen (hier an imga.data[] )

In der äußeren for-Schleife werden alle Bildpunkte durchlaufen. Der Index i wird für jedes Pixel um +4 erhöht. Die ersten 3 Elemente (0..j..3) enthalten die RGB-Daten. Eines dieser Elemente (rgbnr) bleibt unverändert, an die beiden anderen wird entweder der Wert 0 (RGB-Auszug) oder 255 (CMY-Auszug) zugewiesen.
Das 4.Element (α-Kanal, Deckkraft) bleibt unverändert.

Zuletzt werden die geänderten Daten mit Methode putImageData() in das Canvas-Element geschrieben.


Javascript Filter-Funktionen

 Der Text dieser Datei enthält alle für die Beispiele dieser Webseite verwendeten Funktionen.

Mit diesem Link wird der ↗ Quelltext der javascript-Datei in einem eigenen Browser-Tab angezeigt.

Alle Funktionen, deren Namen mit 'canvas_pixel_' beginnt, sind ähnlich programmiert: Sie kopieren die Original-Grafik in ein Canvas-Element, lesen dessen Pixel-Daten, ändern die Daten und schreiben sie in das Canvas-Element.

Die Funktion canvas_pixel_mirror() ist etwas aufwändiger programmiert: Hier werden die geänderten Daten zunächst in einen Zwischen-Speicher geschrieben. Dieser wird erst nach Abschluss der Rechnungen in das Array der Pixel-Daten geschrieben.
Der zusätzliche Schritt ist immer dann notwendig, wenn durch einen Filter andere Pixel als die gerade untersuchten verändert werden.