CODEWITHSUNDEEP
javascriptjqueryblur
user880057
user880057

Reputation:

Blur image with JavaScript or jQuery?

Is there any way to blur images with JavaScript/jQuery so that when they are blured I can sharpen them by hovering them with the mouse?

Upvotes: 2

Views: 2401

Answers (2)

Quasimondo
Quasimondo

Reputation: 2545

There is a plugin for jQuery called blur.js http://blurjs.com which uses my very fast Stack Blur algorithm: http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

Upvotes: 1

katspaugh
katspaugh

Reputation: 17899

Pixastic can do that for you. Here's the relevant doc: http://www.pixastic.com/lib/docs/actions/blur/

To blur:

Pixastic.process(document.getElementById('demoimage'), 'blur');

To revert:

Pixastic.revert(document.getElementById('demoimage'));

The entire solution with jQuery:

var blur = function () {
    Pixastic.process(this, 'blur');
};

var unblur = function () {
    Pixastic.revert(this);
};

$('img').each(blur).hover(unblur, blur);

Upvotes: 1

Related Questions