Flouter une image avec JavaScript ou jQuery ?

Question

Existe-t-il un moyen de rendre les images floues avec JavaScript/jQuery de sorte que lorsqu'elles sont floues, je puisse les rendre plus nettes en les survolant avec la souris ?

Answer 1

Pixastic peut le faire pour vous. Voici le document correspondant : http://www.pixastic.com/lib/docs/actions/blur/

Pour estomper :

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

Pour revenir :

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

Toute la solution avec jQuery :

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

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

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

Answer 2

Il existe un plugin pour jQuery appelé blur.js. http://blurjs.com qui utilise mon algorithme très rapide Stack Blur : http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html