Bilder im Retrolook mit HTML5 Canvas und Vintage.js

Kein Beitragsbild

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren...

Fotobearbeitung unter Verwendung von HTML5 mit JavaScript und Canvas gewinnt an Beliebtheit. Nachdem wir vor kurzem bereits das jQuery-Plugin tiltShift.js hier vorstellten, welches, wie der Name erahnen lässt, den beliebten Miniaturisierungseffekt auf beliebige Fotos anwenden kann, wollen wir Ihnen heute Vintage.js zeigen. Dieses jQuery-Plugin, das allerdings auch als Webservice genutzt werden kann, bieten Ihnen die Möglichkeit, Ihren Bildern den Look vergangener Zeiten zu verpassen. Und das macht es ganz vorzüglich.

Vintage.js als Webservice mit Galerie

Entwickler Robert Fleischmann stellt mit dem jQuery-Plugin Vintage.js eine extrem flexible Möglichkeit vor, Fotos mit vielen Parametern zur digitalen optischen Alterung auf den Leib zu rücken. Wer sich vor dem Einbau in die eigene Website zunächst von den Möglichkeiten überzeugen will, oder ohnehin nur einen schnellen Weg sucht, seine Bilder zu verfremden, sollte die Projekt-Website besuchen.

Unter Vintagejs.com finden Sie einen Onlinedienst, der es ermöglicht, Bilder hochzuladen, über Schieberegler zu verfremden und sie sogar öffentlich in einer stetig wachsenden Galerie zur Schau zu stellen. Der letzte Punkt ist natürlich optional. Das weiter oben gezeigte Bild stellt eine Verfremdung des folgenden Fotos dar. Sie sehen, Vintage.js kann was mit dem Canvas:

Online ist die Bildmanipulation sehr komfortabel und direkt visuell prüfbar möglich. Die Benutzeroberfläche bedarf zum Verständnis keines Hochschulstudiums:

Hat man sein Bild fertig bearbeitet, kann es heruntergeladen und/oder im Dienst öffentlich sichtbar gespeichert werden. Die Galerie umfasst bereits einige tausend Seiten mit Nutzerbildern. Wie üblich bei user-generiertem Content ist die Qualität stark unterschiedlich.

Vintage.js als Plugin für die eigene Website

Nachdem Sie sich nun von den Möglichkeiten des JavaScripts überzeugt haben, schauen wir auf die technische Implementation des Plugins auf der eigenen Website. Um Vintage.js zu nutzen, ist jQuery erforderlich. Zudem muss das Plugin, sowie das mitgelieferte Stylesheet eingebaut werden:



Vintage.js wird innerhalb der Seite nur einmal aufgerufen, die einzelnen, durch das Plugin zu bearbeitenden Bilder erhalten die CSS-Klasse vintage und werden auf diese Weise vom JavaScript “erkannt”. Der Aufruf kann auf der Basis der vorkonfigurierten Werte erfolgen, was so aussähe:

Es ist aber auch möglich, drei weitere Presets zu wählen, als da wären sepia, green und grayscale, deren Auswirkungen auf die Bilder sich anhand der Namensgebung erschließen lassen. Wer mehr Flexibilität wünscht, wählt kein Preset, sondern übergibt dem Funktionsaufruf benutzerdefinierte Optionen.

Bei dieser Variante ergeben sich sämtliche, bereits aus dem Onlineservice bekannten Möglichkeiten. Neben der wertebasierten Effekt-Parametrisierung kann zudem das Bildformat der fertigen Datei geändert werden, im Standard werden JPG-Dateien erstellt. Für die eventuelle Anschlussbearbeitung ist eine Callback-Funktion nutzbar. Ein stark parametrisierter Aufruf der Funktion könnte etwa so aussehen:

Vintage.js funktioniert in allen modernen Browsern und im Internet Exploder 9. Wesentliche Voraussetzung ist die Unterstützung des Canvas-Elements. Der Mannheimer Robert Fleischmann stellt das Plugin zur kostenfreien Nutzung, sowohl privat, wie auch kommerziell unter der Doppel-Lizenz MIT und GPL zur Verfügung.

Links zum Beitrag:

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Sortiert nach:   neueste | älteste | beste Bewertung
ad
Gast

OT: Die Bilder, die du eingebunden hast, sind zw. 500 und 700kb groß. Nur mal so als Tipp. ;)

Dieter Petereit
Gast

Darum sollte sich eigentlich ein Plugin kümmern. Tut es wohl nicht. Danke für den Hinweis!

Dieter Petereit
Gast

So. Jetzt manuell durch TinyPNG gejagt und 75% gespart…

Johannes
Gast

Interessanter Artikel. Ich würde das ganze auch gerne online ausprobieren. Aber wo kann ich das online ausprobieren? Irgendwie habe ich noch nicht den richtigen Link gefunden. Vorab schon mal vielen Dank für den Hinweis.

wpDiscuz