Question

Is there a way to apply a “blur” effect on a background image in Javascript/jQuery?

[edit] By “blur” I mean a Gaussian/Motion blur not a drop shadow 🙂

Thank you.

Answer 1

The simplest, most cross-browser-friendly way to do this will be to create blurred and non-blurred versions of your background image ahead of time, and use JavaScript to swap the blurred version in when you want to. Something like:

$('#hoverMe').hover(function ()
{
    $(this).css('background-image', 'url(blurredBackground.png)');
});

---

Edit: It’s a bit of a cop-out, but all you need to do is create a new image element for Pixastic to operate on. Since Pixastic uses a canvas anyway, you can let the library do the work for you, and then just call toDataURL() to get a URL string. Then, pass that string back into the background-image CSS.

Very basic demo here. Tested in Chrome, Firefox.

Notes:

• I couldn’t get this to work in IE 8 in under 5 minutes (though it might be possible – Pixastic’s cross-browser support info) – I have no patience for IE.
• The images you’re blurring must be from the same origin (domain and subdomain) as the page you’re blurring them in. Otherwise, you’ll get a security exception (and no blurring). This is a security feature of canvas, as per the spec. This is why my example image is jsbin’s favicon, and not an image that’s bigger/more interesting/from anywhere else.
• If you’re doing any sort of repeated blurs of the same image, I would strongly recommend caching the result(s) of toDataURL() so the browser doesn’t have to repeat its work. I don’t know how toDataURL() works under the hood so this might not be entirely straightforward.

Happy blurring!