Instagram made us fall in love with image filters. A well-chosen filter can enhance a photo greatly. It augments the best parts and softens undesirable qualities.

On a recent project I was charged with achieving a similar effect for an HTML5 canvas powered image editor. When the user saves their image, the app uploads the canvas bitmap data as a JPEG. This meant that the pixel data had to be altered directly.

So began my journey down the pixel manipulation rabbit hole.

Prior Art

Late last year Una Kravets gave us Instagram filters in CSS. The project is an excellent example of how powerful CSS has become.

In brief, modern CSS allows one to apply most photo effects directly onto an HTML element: