使用JavaScript或jQuery模糊圖像？

Question

有沒有什麼辦法可以使用JavaScript/jQuery模糊圖像，以便當它們模糊時，我可以通過鼠標懸停它們來銳化它們？

Answer 1

Pixastic可以爲你做到這一點。下面是相關文檔：http://www.pixastic.com/lib/docs/actions/blur/

模糊：

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

要恢復：

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

使用jQuery整個解決方案：

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

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

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

Answer 2

還有的jQuery插件稱爲blur.js http://blurjs.com它使用我非常快速的Stack Blur算法：http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html