A couple days ago I received an e-mail from an imgAreaSelect user, asking me if it’s possible to blur an image in JavaScript. The question intrigued me, so I Googled around a bit, and came across an interesting image effects library written by Jacob Seidelin. Apart from blurring, it lets you mangle images in a number of other wicked ways — all with just JavaScript. Go and play with the demo to see for yourself.
I thought it would be nice to have a jQuery plugin with similar functionality, especially that jQuery’s chaining would make it possible to combine effects and do things like:
$('img.example').imgFx('blur').imgFx('brightness', {value: 10});
So, I’ve started working on the implementation — there’s not much to see yet, as just the blur effect is working for now, but if you’d like to take a peek, here’s a simple demo. It works in recent versions of Firefox and Opera, and in Internet Explorer 6 or above. That’s because the effects are implemented using canvas, which basically lets you draw inside the browser window and over images, but it’s a new element defined in the upcoming HTML 5 specification, and is not (yet) widely supported.
You might be wondering, since the blur demo works in Internet Explorer 6, does it mean that such a pitiful browser supports the brand new canvas? Actually — no, it does not, and neither does IE7. I’ve heard rumors that canvas is (or will be) supported in IE8, but haven’t seen it for myself. How does the blur demo work in IE then? Well, by using the proprietary implementation of image effects that Microsoft has built into the browser, accessible with the CSS property "filter".
I don’t know if the plugin will turn out useful for any practical purpose and not merely for demonstration, but I’m going to give it a shot anyway and develop it. If you have any ideas on what additional effects or features could be implemented, feel free to leave a comment or send me an e-mail.
