Blur the Image Gradually using jQuery

Question

I have an image and I want to set some initial blur to it. Upon some action from user I want image to decrease it's blurriness by some amount. Is there any jQuery plugin exist which lets you handle the blur radius or something like that?

I have come across one jQuery API here http://www.pixastic.com/lib/docs/actions/blur/ But i don't think it is able to change blurriness of image gradually.

Need help, Please Suggest What should i do? Is there anything else that i can use? Thanx in advance.

Answer 1

Any javascript will be client side only - the image will be available to be viewed clearly if the user disables javascript or at the point when the image has loaded and the javascript has not run.

If it is imperative that the image only gets clearer when the user selects the correct answer I'd suggest having images of different 'blurriness' on the server that are used to replace the previous image.

Answer 2

Have a look a this tutorial: http://tympanus.net/codrops/2011/11/18/fullscreen-image-blur-effect-with-html5/

It uses StackBlur to gradually blur the image.

Answer 3

It can. Each time Pixastic.process(img, "blur"); is called, the image is blurred a little more, so it is just a matter of triggering that method multiple times.

Now decreasing the blurriness will be a little trickier, since (I am guessing) that will involve reverting to a "less-blurred" cached copy of the image. Good luck with this!