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

qTip2: Tooltips mit jQuery Wenn man erst einmal verdrängt hat, dass ich nicht über Ohrenstäbchen blogge, kann man sich mit dem Gedanken beschäftigen, dass es um Tooltips geht. D...
jFontSize – dynamische Font-Size mittels jQu... Ich entwickele zur Zeit einen Magento-Shop für Silver Surfer. Natürlich gibt es da besondere Ansprüche, und eine davon ist die klare Lesbarkeit der Se...
jQuery++ – Power Tools für jQuery jQuery kann eine Menge, aber halt nicht alles. Solls auch nicht, aber es gibt durchaus ein paar Funktionen / Plugins, die ständig im Einsatz sind, und...
jQuery Logger – Loggen / Debuggen in jQuery Loggen / Debuggen von JavaScript ist so eine Sache. Alert fällt komplett hinten raus, console.log geht nicht im Internet Explorer, und alles in allem ...

Schreibe einen Kommentar