Instagram Image Filters with HTML5 Canvas
Lets start with some image processing libraries:
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.
Image Filters with Canvas
Pixel Manipulation in CANVAS
Image Filters with WebGL
Pixel Manipulation with HTML5 CANVAS
Canvas image filters
image filters for the CVI effect libs