Javascript + jQuery, applying a blur effect to background images

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!

Answer 2

I encountered the same problem today, My solution was the following. I used the regular way to use pixastic and blur an image. Pixastic then in my case created a canvas element. I made sure this canvas element had an id, and by getting its data, i used the data to set my background-image.

Example:

HTML:

<div id="hiddenDiv" style="width:0px; height: 0px;"></div>

Javascript:

var img = new Image();
img.id = "blurredImage"
img.onload = function() {
    Pixastic.process(img, "blur", function(){
        var canvas = document.getElementById('blurredImage');
        var dataURL = canvas.toDataURL("image/png");
        document.getElementById('blurredImage').style.backgroundImage = 'url("' +  dataURL + '")';
    });
}
document.getElementById("hiddenDiv").appendChild(img);
img.src = "myimage.jpg";

It's quite a workaround, however I had to use floating divs, which made me unable to use position absolute, and z-index's and I won't blurr tons of images.

Goodluck!

Answer 3

There is this jquery-plugin blur.js which does what you are looking for.