I remember vividly the first time I saw Google Maps in the browser. I was blow away by how smooth and natural the scrolling and zooming were. It just worked so well. At the time this was something we expected in applications but not on the web. That seems like a lifetime ago and now just about anything you used to do in a dedicated application can be done in a web browser. This includes image manipulation. Companies like pics.io even provide tools for editing raw files in the browser.

There are still some road blocks. Applications need to be written in javascript, which presents some performance challenges, and performance can vary depending on the particular browser. But the javascript performance in the latest browsers is pretty astonishing. Javascript is mostly single threaded, which is problematic for working on anything other than small images. If you've ever had an 'unresponsive script' error you have experienced this problem. The latest browsers, however, have some tricks up their sleeves like web workers which can help. Also, mainstream support for webGL is right around the corner, which should dramatically increase the performance of many image processing tasks.

Having never explored much javascript beyond user interface eye candy, I though I would take some of our rainy weekend and see what it would take to perform a simple task: accept an image from the user, and then calculate and plot the xy chromaticity of each pixel. I came up with this little tool:

Check it out: The HTML5 Chromaticity Plotter

This should let you drag an image into the image box which will then be read by javascript, analyzed, and plotted — all in the browser. It's just a test-of-concept and comes with a few caveats, most of which are explained on the page. It probably doesn't work in Internet Explorer prior to version 10, but should work pretty well in the latest versions of Chrome, Firefox, and Safari. It also doesn't included much feedback like a progress bar during the processing of the file, so if you're on a slower machine there may be a short pause as it works. I don't suggest dropping a 28 megapixel image onto the box. The notes mention that because the images are first processed by the browser, they are converted to sRGB before we can analyze the color. This doesn't have to be the case — it is possible to read and process the raw byte array from the file before it's handed off to the browser, but then the responsibility of decoding the image falls on the developer, and that's a little too much work for a weekend, at least for me. There are some libraries out there like jpgjs that might make it easier. Maybe I'll try incorporating this if there's another iteration.

The ability to easily access color data from images on the page offers some interesting possibilities to the web designer such as changing the interface color to complement the color of an image in a gallery, or allowing users to adjust images to suit their taste in real time.

I'd love to know what works and doesn't work — feel free to drop a comment or a hit me up on Twitter: @markmeyerphoto if you have questions or suggestions.