Vintage Effekte für Photos mittels jQuery

Screenshot der Vintage.js Homepage

Ich steh ja auf diese Vintage-Effekte für Photos, und insbesondere auf die ganzen Instagram-Filter die es so gibt. Früher war es ja so, dass man diese zwar auch auf Bildern einer Webseite anwenden konnte, aber in der Regel ging das nur mit PHP. Heutzutage gibt es HTML5 und insbesondere das Canvas-Element. Was liegt also näher als ein Bild in ein Canvas zu kopieren, und dort zu manipulieren?

Screenshot der Vintage.js Homepage

Das jQuery-Plugin vintageJS macht exakt dies: Bild in Canvas kopieren, manipulieren und fertig ist der Vintage-Effekt. Darüber hinaus kann es auch nach Sepia, grün und rot färben und dem Bild somit auch einen „alten Anstrich“ verpassen. Die Verwendung das HTML-Canvas-Elements hat natürlich entscheidende Vorteile: auf dem Server befindet sich das unveränderte Original-Bild und die Last zum Filtern des Bildes liegt beim Client. Jegliche Form von Image-Caching auf dem Server entfällt. Habe ich keine Lust mehr auf Vintage schalte ich das Plugin eben wieder ab und habe meine Originale wieder – oder einen gänzlich anderen Effekt.

Die Anforderungen der Frontend-Enwicklung haben sich in den letzten Monaten drastisch geändert. Die Entwicklung ist weg von PHP (und dem Server) in Richtung JavaScript (und dem Client) gegangen – eine Entwicklung die leider noch nicht überall angekommen ist.

Ähnliche Beiträge


Favicon mit Javascript austauschen
Nach meiner bescheidenen Meinung sind Favicons innerhalb einer Webanwendung die Elemente, denen die wenigste Beachtung geschenkt wird. Ich habe ja sch...


Tutorials Spieleentwicklung in jQuery
Wer den Blog fleissig verfolgt weiss ja, das ich mich auch ein wenig mit dem Thema Spieleentwicklung beschäftige. Man kann da bereits mit einfachen Mi...


Star Rating mit jQuery jRating
Ich glaube die ersten die es hatten war Amazon, jene verteufelt einfache Möglichkeit einen Artikel ganz schnell mit einem bis fünf Sternen zu bewerten...


Fehlende Bilder mit jQuery nachbearbeiten
Hat man mal einen Blog oder eine Webseite ein paar Jahre online, entstehen primär zwei Probleme: 1) Evtl. verlinkte Seiten existieren nicht mehr und 2...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.