Filterous 2 Photo Manipulation Library is Released!
To see how it works, check out the browser demo!
Story Behind the Project
Between 2012 and 2014, I was a member of W3C’s Core Mobile Community Group. To demonstrate the HTML5 APIs for mobile phones, I have written the demo called Coremob Camera, and show this at the W3C booth at Mobile World Congress in Barcelona (Interview) in 2013, and talked about the technologies behind at W3C Conference in San Francisco (My talk on YouTube).
Basically the app was like a web app version of Instagram (which, we withheld from using the name for the legal reason.)- you take a picture from the mobile phone camera, and apply a filter to give the glamorous finish. To add a “filter” feature, I wrote some code to manipulate the original jpeg image, and later, I separated the code out of the whole app to open-sourced it as an independent library.
Four years has passed, and now I decided to make it for node.js, then used Browerify to export it for browser use.
How It Manipluate Images
Filterous takes an image into a
CanvasRenderingContext.getImageData() method of the Canvas API returns an
ImageData object representing the underlying pixel data of the canvas, and the
data property of
pixelData stores the color info of an each pixel in the canvas. (The diagram below shows a canvas size of only 9x9 pixel to make it simple).
Each pixel in the data array consists of 4 bytes values- red, green, blue, and alpha channel, and each of the R (red), G (green), B (blue) and A (alpha transparency) values can take values between 0 and 255.
I referenced numerous sources (credited them in my source code) for the algorithms to alter a color image to grayscale, brighten, saturate, etc. and I used the combinations to give the Instagram-like predefined filters. I probably spent most of my time mimicking the entire set of the filter they offer!
The source code and documentation are available on GitHub. If you’d like to file bugs or contribute, please feel free to send me issue and pull requests!
- ← Creating a Simple Facebook Messenger AI Bot with API.ai in Node.js
- GIT PURR! Git Commands Explained with Cats! →