Blur image with JavaScript or jQuery?

Question

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?

Answer 1

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);

Answer 2

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