Dynamic Image Blurring with JS

This is a demo of dynamic (in the sense that it works with any image, and processing is performed on the user's browser) image blurring with vanilla JavaScript.

I saw this effect used beautifully on Rdio, where they have (low res) track/album artwork form part of the page's background (100% width; ~1440px wide!)

My implementation achieves that effect using a JavaScript image processing library called Pixastic. The only disadvantage is it doesn't offer any callback functions, so you can't hide the image 'til it's processed... Or maybe you can, and I just don't know how. I am definitely going to play with this more.

Try it!

Replace the src attribute of the <img>, and see it blur.

Modify the blur amount (between 0 and 5, float) in the JS to the far right.