javascript blur on images

Question

Is there a javascript library other than Pixastic, or a jquery extention, to blur images?

situation: I have a page of search results. the results consist of a bunch of users. these users have lists of images, which are hidden under a button (display: none;). Some of these lists of images are private. The private lists of images need to be blurred out.

tries: I already had a go with that firefox-only css trick, but that didn't seem to work. I already tried Pixastic's library, fast-blur as well as normal blur, but that first gave me an error because I passed a jquery object. But when I changed it to a DOM object, it just didn't work (but gave no more errors). I finally went and tried to use the code used in their actual demo (got it through firebug), creating an image in js, creating the blur effect handler and appending the image, but that just appended the image, not blurred.

specs: I'm working in coldfusion, so I'm going to give ImageBlur() a go, but as this has to go in the search results page, it may not be such a good idea to blur that many images server side..

update: I'm trying to work with blur.js, which seems to work fine. but when I call the function used (jqueryelement.blurjs();) a second time, my first image doesn't get blurred (it does gets processed by the library and gets a background of the correct size, but without an image), but the second one does. If I dynamically build the javascript string server side, that means that only the last image gets blurred.. : \

Answer 1

There are some pointers to doing blur here:

Gaussian Blur onHover Using jQuery

Especially the answer by Quasimodo, where he's made a blur function that is used in this jQuery add on:

http://blurjs.com/

Answer 2

You could always use the semi-new CSS3 filter property.

filter: blur(10px);

Filters are fully animatable and work on most browsers (as you can see here, all browsers except IE). Also you will need the -webkit- prefix for most browsers.

jsfiddle