Flickr Noir

Posted by on Apr 2, 2011 in Geekery, programming | No Comments

If you’re reading my blog, there’s a fair chance that you’re (a) a Flickr user, and (b) a Chrome or Safari user, so you might be interested in my latest piece of geekiness.

The other day I was on Flickr trying to figure out whether a photo one of my friends had posted might look better in black and white. I did what I’ve done loads of times before — downloaded the image, sucked it into a graphics program, and desaturated it. But that made me think — there must be an easier way…

So, introducing Flickr Noir, a Chrome extension that will let you turn the main photo on any Flickr photo page black and white at the click of a button. It does a nice quick‐fade effect during the desaturation, and clicking the toolbar button again will restore the colour, so you can easily compare the two.


Since writing the Chrome version, I’ve also created a Safari version. This was a fairly easy conversion job; the two extension systems are very similar, presumably because of their shared base in webkit. I’m still not sure which system I prefer — while I found Apple’s documentation much nicer, Safari’s “Extension Builder” crashed on me eight times while I was doing the conversion work, which was a tad disconcerting.

You can download either the Safari or the Chrome version from my Flickr Noir software page, here.

My extension uses Dmitry Kelmi’s nice little jQuery desaturate plugin to do the hard work, basically copying the image into a canvas and processing it there. Then I add the desaturated photo on top of the normal photo on the photo page, and the extension’s toolbar button toggles between showing and hiding it with a nice jQuery fade effect.

The only problem I had was avoiding tripping over cross‐domain security violations, but luckily “serg” on Stackoverflow helped me out of that one.

If you give it a try and notice any problems — or just enjoy it! — please leave a comment.


« An Out‐of‐Book Experience | Review: TrendyDigital Waterguard Plus Kindle 3 Case »