CODEWITHSUNDEEP
jqueryimageblurry
Chaitanya Chandurkar
Chaitanya Chandurkar

Reputation: 2187

Blur the Image Gradually using jQuery

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.

Upvotes: 5

Views: 3369

Answers (4)

Quinn Keaveney
Quinn Keaveney

Reputation: 1574

This can now be done without Javascript, usually only CSS.

eg.

backdrop-filter: blure(5px);
filter: blur(5px);

This way you can manipulate the CSS values depending on the intended outcome.

enter image description here See https://codepen.io/QuiteQuinn/pen/jOBxGjr.

Upvotes: 0

karim79
karim79

Reputation: 342635

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!

Upvotes: 0

Rich O'Kelly
Rich O'Kelly

Reputation: 41757

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.

Upvotes: 2

Kahlil Lechelt
Kahlil Lechelt

Reputation: 566

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.

Upvotes: 0

Related Questions