Instagram Image Filters with HTML5 Canvas

Preset photo filters are nothing new but Instagram has certainly made them very popular in recent times. While Instagram and it’s many clones are manipulating pixels with native technologies, the web has HTML5 CANVAS which enables all kinds of image editing with JavaScript. There are many image processing libraries today that could be used to recreate Instagram photo effects in the browser. Today, I am going to explore some of these scripts, evaluate how they can be used to recreate the actual Instagram filters, and create a demo that combines HTML5 drag and drop, webcam photo capture, and lots of various preset photo effects.

Lets start with some image processing libraries:

CamanJS
Pixastic
glfx.js
filtrr2
vintageJS
PaintbrushJS
jQuery-filter.me

From the list above, I really like glfx (take a look at these WebGL filters) but I had to drop it due to current lack of WebGL support in iOS Safari.. I have played around with Pixastic a bit, and it’s great, but CamanJS already comes with a bunch of preset image filters, so it was the clear winner.

Since I will be working with images, the demo needs to have a drag and drop functionality and it should also allow capturing the image from the webcam. I was going to use say cheese for webcam integration but my drag & drop search landed me on fileAPI which already has a CamanJS demo. How can we make it better?

There are already some great examples of creating Instagram image filters with CamanJS, but none of these actually showed the Instagram filers (like Gotham or 1977). jQuery filter.me uses Instagram filters for Photoshop but the filters are not really CamanJS friendly as they are represented as a RGBA object.

So, I created a CamanJS plugin called rgba and used it to register the Instagram filters in addition to the preset CamanJS filters. Finally, to make this demo more usable, I have removed the automatic resizing and I allow you to download the altered image via a simple download button and CamanJs Save function. I also check the original image mime type and save as jpeg if the original image was of that type, otherwise I save as a PNG. Here is the Instagram Photo Filters with CamanJS Demo.

External:

Image Filters with Canvas
instaclone
svg editor
svg.filter.js
Pixel Manipulation in CANVAS
Image Filters with WebGL
Pixel Manipulation with HTML5 CANVAS
Canvas image filters
image filters for the CVI effect libs