Your Photos Retro Style with HTML5 Canvas and Vintage.js
Vintage.js: Webservice plus Gallery
German developer Robert Fleischmann introduces an extremely flexible way to expose photos to virtual digital aging. Lots of parameters help you finetune the results. If you’re thinking about implementing the plugin into your own website, but are unsure regarding its capabilities, you should take a look at the project’s website. This is also true, if you’re just searching for a quick and easy way to retro style your photos.
Vintagejs.com provides a web app, where you can upload your own pictures, manipulate them via simple value sliders and even expose them to the public eye in an ever growing gallery. This last aspect is totally optional. The following image shows a possible result vitage.js is able to achieve:
Before applying heavy filtering the image looked like this:
Check out the online service. You’ll notice that the manipulation is comfortable and that you’re working in an wysiwyg surrounding, at least almost. Looking at the user interface you’ll feel at home quite quickly. You don’t need any academic background to use it:
After you’re finished firing effects to your photos, you can download it and/or save it publicly in the online gallery. You’ll find thousands of pages with photos there. The quality of course, as usual with user-generated content, is varying…
Vintage.js: Plugin for your own Website
After you’ve convinced yourself that vintage.js is powerful enough for your needs, let’s take a look at the technical implementation of the plugin. Vintage.js requires jQuery. Furthermore you’ll have to embed the plugin and the accompanying CSS stylesheet:
There are three different presets to choose from. You’ll easily guess what these will achieve, as they are called
grayscale. If you’re into more flexibility or a full blown control freak even, vintage.js is for you, too. You won’t be working with a preset, you’ll pass custom parameters to the function call.
Using this variant you’ll feel reminded of the possibilities of the online service. While you can change all the parameters that alter the imagery, you are also able to change the file format. A callback funktion allows you to decide which further steps should be invoked after execution of the main task. A function call with a reasonable amount of parametrization could look like this:
Vintage.js works in all modern browsers and the Internet Exploder 9. Crucial is support of the canvas element. Developer Robert Fleischmann provides you with the plugin without charging for anything. The plugin as well as the online service can be used totally free, for personal and commercial projects alike, as it is double-licensed under MIT and GPL.