Javascript + jQuery，對背景圖像應用模糊效果

有沒有辦法在Javascript/jQuery的背景圖像上應用「模糊」效果？Javascript + jQuery，對背景圖像應用模糊效果

[編輯]「模糊」我的意思是高斯/運動模糊沒有陰影:)

謝謝。

2010-08-09 Barrie Reader

最簡單，最具有跨瀏覽器友好的方法就是提前創建背景圖像的模糊和非模糊版本，並在您想要的時候使用JavaScript交換模糊版本。喜歡的東西：

$('#hoverMe').hover(function() 
{ 
    $(this).css('background-image', 'url(blurredBackground.png)'); 
});

編輯：這是一個有點虎頭蛇尾，但所有你需要做的就是創建一個新的形象元素Pixastic來進行操作。由於Pixastic無論如何都使用畫布，因此您可以讓圖書館爲您完成工作，然後撥打toDataURL()以獲取URL字符串。然後，將該字符串傳遞迴background-image CSS。

非常基本的演示here。測試Chrome，Firefox。

注：

我不能得到這個在IE 8的工作在5分鐘內（雖然有可能 - Pixastic的cross-browser support info） - 我沒有耐心的IE瀏覽器。
您模糊的圖像必須來自與您模糊其中的頁面相同的來源（域和子域）。否則，您將得到安全異常（且不模糊）。這是canvas的安全功能，根據the spec。這就是爲什麼我的示例圖像是jsbin的圖標，而不是更大/更有趣/從其他任何地方的圖像。
如果你正在做同樣圖像的任何形式的重複模糊，我會強烈建議緩存toDataURL()的結果，以便瀏覽器不必重複它的工作。我不知道toDataURL()如何工作，所以這可能不是完全簡單。

快樂模糊！

來源

2010-08-09 14:18:20

謝謝「熊會吃你」，我希望避免乘以我所有的圖片（130+）2 – 2010-08-09 14:23:08

在這種情況下，你最好的選擇可能是使用Pixastic，正如VeeWee所建議的那樣，背景圖像與[一個低Z指數'img'標籤]（http://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image）。 – 2010-08-09 15:12:20

認真沒辦法做到這一點呢？（ – 2010-08-10 15:20:09

我今天遇到同樣的問題，我的解決方案如下。我用普通的方式來使用pixastic和模糊圖像。 Pixastic然後在我的情況下創建了一個畫布元素。我確信這個canvas元素有一個id，並且通過獲取它的數據，我使用這些數據來設置我的背景圖像。

例子：

HTML：

<div id="hiddenDiv" style="width:0px; height: 0px;"></div>

的Javascript：

var img = new Image(); 
img.id = "blurredImage" 
img.onload = function() { 
    Pixastic.process(img, "blur", function(){ 
     var canvas = document.getElementById('blurredImage'); 
     var dataURL = canvas.toDataURL("image/png"); 
     document.getElementById('blurredImage').style.backgroundImage = 'url("' + dataURL + '")'; 
    }); 
} 
document.getElementById("hiddenDiv").appendChild(img); 
img.src = "myimage.jpg";

這是相當一個解決辦法，但我不得不使用浮動的div，這讓我無法使用絕對位置，和z-index的，我不會模糊噸圖像。

Goodluck！

來源

2011-08-16 15:34:44

有這個jquery插件blur.js它做你正在尋找。

來源

2013-04-26 10:42:12 Pete

Javascript + jQuery，對背景圖像應用模糊效果

回答

相關問題