Vintage Effekte für Photos mittels jQuery

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

Einfaches Sortieren von Tables mit jQuery Tabellen sind so etwas wie das persönliche Waterloo des Web-Entwicklers. Verpönt für das Design führt gerade im Backend in der Regel kein Weg an dem H...
AutoSuggest mit jQuery Das Auto-Completing bzw. Ajax-Angetriebene Suchen werden ja im Internet immer beliebter, allerdings haben die Teile bei falscher Programmierung die An...
OpenJS Grid – Visualisierung von Daten via Ajax Ok, der Titel ist vielleicht etwas mystisch, im Endeffekt reden wir über einen mit JavaScript aufgebohrten Table ;) Ich habe mich ja schon des Öfteren...
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...

Schreibe einen Kommentar

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