Question

I am building an iOS app in Appcelerator and I need to let the user take pictures and then apply a filter to them (like Instagram). How can I achieve this? Is it perhaps possible to use any javascript based image filter library?

Thankful for all input!

Answer 1

It is definitely possible, http://www.pixastic.com/lib/docs/ you can see some filters here as an example. All of these affects are achieved by looping over the image data and manipulating the pixels one by one. Hard part here would be making(or finding) the algorithms that would look good, like instagram has.

There are also masks in instagram, which are images like a polariod or old films, like here: http://www.aviary.com/tutorial.aspx?tutorial=cross_processing&step=12 . These are applied using clipping masks : https://developer.mozilla.org/samples/canvas-tutorial/6_2_canvas_clipping.html or merging two images data, like here: http://www.benbarnett.net/2011/06/02/using-html5-canvas-for-image-masks/ .

So all of what instagram does with images, you can do with canvas. It would be cpu intensive on a phone, but i think iPhone can handle it.

Some examples:

• https://github.com/pnitsch/BitmapData.js
• http://mezzoblue.github.com/PaintbrushJS/demo/