Dieter Petereit 14. September 2012

Bilder im Retrolook mit HTML5 Canvas und Vintage.js

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

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+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

5 Kommentare

  1. 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.

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

Tut uns leid, aber die Kommentare sind geschlossen...

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück