3 Javascript Plugins to Imitate Instagram Image Filters

Posted by & filed under Tech, Web Development. 38,313 views

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:


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"/>


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 () {
		.vignette(300, 60)


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 () {
        vignette: {
            black: 0.8,
            white: 0.2
        noise: 20,
        screen: {
            red: 12,
            green: 75,
            blue: 153,
            strength: 0.3
        desaturate: 0.05



9 Impressive WebGL Javascript Effect Showcase
4 Versatile JQuery Drop Down Menu Solutions
Why WordPress is now used by 30% of Top 10 Million Sites