3 Javascript Plugins to Imitate Instagram Image Filters

Instagram has been a sensational topic of all time. It’s a photo shooting app which takes photo in square dimension and you can apply different kind of lomo, vintage and other cool filter effects to the photos. It makes an ordinary photo looks pretty, people likes it, it’s magical. 🙂

There are quite a few of image manipulation plugins out there, but we have chosen 3 that potentially can be enhanced or tuned to do the same thing – add cool effect to your photo. We’re not talking about rotation, skew, flip…. we’re talking about vintage effect, blur, color tuning etc. There is a caveat, it only works with Canvas supported browsers. That’s one of the reason there aren’t a lot of this kind of development at the moment. But if you want to be cutting edge, you can start playing with these plugins:

PainbrushJS

PaintbrushJS is a lightweight browser-based image processing library built with Javascript and canvas.

Sample Code

Instead of using javascript, you just have to add the right attributes and its value to the image.

<img src="image.jpg" class="filter-emboss" data-pb-emboss-amount="0.5"/>
<img src="image.jpg" class="filter-mosaic" data-pb-mosaic-opacity="0.5" data-pb-mosaic-size="5"/>

CamanJS

The main focus of CamanJS is manipulating images using the HTML5 canvas and Javascript. It’s a combination of a simple-to-use interface with advanced and efficient image/canvas editing techniques. It is also completely library independent and can be safely used next to jQuery, YUI, Scriptaculous, MooTools, etc.

Sample Code

Caman("images/example-image.jpg", "#example-canvas", function () {
	this
		.saturation(20)
		.gamma(1.4)
		.vintage()
		.contrast(5)
		.exposure(15)
		.vignette(300, 60)
		.render();
});

vintageJS

vintageJS is a jQuery plugin that uses the html5 canvas element to add a great vintage look to your photos. It comes with three effect-presets and can be customized very easily.

Sample Code

$('img.vintage').click(function () {
    $(this).vintage({
        vignette: {
            black: 0.8,
            white: 0.2
        },
        noise: 20,
        screen: {
            red: 12,
            green: 75,
            blue: 153,
            strength: 0.3
        },
        desaturate: 0.05
    });
});