Heute gibt es mal wieder ein bisschen Javascript-Code. Es soll darum gehen, wie man Bilder mittels Javascript verpixeln kann. Die hat sowohl vor als auch Nachteile, welche ich nachfolgend einmal kurz aufzählen möchte.
Vorteile:
- Das Verpixeln kann dynamisch geschehen (Händischer Aufwand im Grafikprogramm fällt weg. Grafiken müssen vorher nicht bekannt sein.)
- Die benötigte Rechenleistung wird auf den Client ausgelagert. Im Gegenteil zu einer serverseitigen Lösung (z.B. mittels PHP/Imagick), wird die Rechenlast verteilt, sodass bei hohen Besucherzahlen der Webserver nicht mit Grafikberechnungen ausgelastet wird
Nachteile:
- Die Verpixelung sollte eher als grafischer Effekt bzw. zur Gestaltung genutzt werden, da die Daten ja erst einmal unverpixelt zum Client geschickt werden. Soll also wirklich der Bildinhalt unkenntlich gemacht werden, muss die Verpixelung weiterhin vor der Auslieferung an den Client geschehen
Wie funktioniert das Verpixeln?
Um Bilder in Javascript zu verpixeln machen wir uns eine Bibliothek namens “Close Pixelate” zu nutze. Diese nimmt sich Bilder aus einem <img>-Tag, liest diese ein, verpixelt sie und zeichnet sie dann auf ein <canvas>-Element. Abschließend ersetzt Close Pixelate das ursprüngliche <img>-Tag mit dem <canvas>-Element.
Da Suchmaschinen im Normalfall keinen Javascript-Code ausführen, sehen diese natürlich weiterhin das <img>-Tag mit dem unverpixelten Bild und indexieren dieses ggf. auch! Wie in der Einleitung bereits erwähnt, solltet ihr diese Methode zum Verpixeln also nur als Gestaltungselement, jedoch keines Falls zum Verstecken von Bildinformationen benutzen!
Wie benutze ich Close Pixelate?
Bevor wir Close Pixelate nutzen können, müssen wir es natürlich zu aller erst in unsere Webseite einbinden. Die aktuelle Version findet ihr hier: Download (close-pixelate.js)
Danach müssen wir die Library in die Webseite einbinden.
<script type="text/javascript" src="close-pixelate.js"></script>
Nun brauchen wir ein Bild, das wir verpixeln wollen.
<img id="squares" alt="" src="raffael_herrmann.jpg" />
Da das Bild erst vollständig geladen sein muss, schreiben wir den Aufruf der Close Pixelate Library in das onload-event. (Solltet ihr mit jQuery arbeiten, verwechselt nicht das onload-Event mit jQuerys ready-Event. Das ready-Event löst schon aus, wenn noch nicht alle Bilder geladen sind. Das ist zu früh für Close Pixelate!)
window.onload = function() {
document.getElementById('squares').closePixelate([
{ resolution : 8 }
]);
};
Im onload-Event suchen wir nun das Bild mittels der getElementById-Methode und rufen dann die closePixelate-Methode zum verpixeln auf. Im obigen Beispiel haben wir mit der Option “resolution” die Minimalkonfiguration angegeben.
Eine Beispielseite könnte wie folgt aussehen:
<html>
<head>
<script src="close-pixelate.js"></script>
</head>
<body>
<h2>Original</h2>
<img id="original" src="raffael_herrmann.jpg">
<hr/>
<h2>Pixelate - squares</h2>
<img id="squares" src="raffael_herrmann.jpg">
<script type="text/javascript">
window.onload = function() {
document.getElementById('squares').closePixelate([
{ resolution : 8 }
]);
};
</script>
</body>
</html>
Das war schon alles, um ein Bild mittels Javascript zu verpixeln. Close Pixelate kann jedoch noch wesentlich mehr. Auf alternative Optionen gehe ich weiter unten im Artikel ein.
Demo und Beispiele
Das obige Beispiel könnt ihr euch auch als Demo online angucken oder herunterladen. Wenn ihr es herunterladet und offline testen wollt, dann öffnet das Beispiel am besten im Firefox, da es bei anderen Browser meist zur Same-Origin-Policy-Problematik kommt. (Online, auf eurem Webspace/Webserver, funktioniert es jedoch in jedem Fall und (jedem) Browser.)
Weitere Optionen
Wie im zweiten Beispiel der obigen Online Demo gezeigt, nimmt die ClosePixelate-Methode noch einige andere Parameter an. Hierdurch lassen sich noch einige Effekte mehr als das reine Verpixeln erzielen.
resolution – Ist ein Pflichtparameter und gibt den Abstand der gerenderten Pixel an.
shape – Gibt die Form der Pixel an. Zur Wahl stehen square (Viereck), circle (Kreis) und diamond (Diamant). Die Standardform ist Viereck (square).
size – Gibt die Größe der gerenderten Pixel an.
offset – Gibt das Offset an. (Einen Faktor, um den das berechnete Pixelraster verschoben wird.)
alpha – Gibt die Transparenz an. Der Wertebereich reicht von 0 (nicht sichtbar) bis 1 (komplett deckend).
Wenn ihr auf die schnelle eine brauchbare Mischung der ganzen Parameter finden wollt und dabei nicht immer und immer wieder speichern und neuladen wollt, dann schaut euch mal thepixelator.com an. Die Seite setzt eine grafische Oberfläche für Close Pixelate auf, sodass ihr ohne großen Aufwand verschiedene Einstellungen testen könnt.
Fazit
Close Pixelate ist meiner Meinung wirklich ein tolles Stück Javascript-Code, welches ich nun schon 2-3 mal sinnvoll in Projekten verwenden konnte. Die Bedienung ist leicht und unkompliziert. Man sollte sich jedoch immer darüber bewusst sein, dass die Daten erst zur Laufzeit und clientseitig verpixelt werden. (Siehe Einleitung für einen Hinweis auf die Gefahren!)
Was haltet ihr von der Library? Könnt ihr sie verwenden oder ist das eher nicht euer Fall?
