帆布模糊背景

我關於帆布新手，我搜索了很多和嘗試，但從來沒有完成找到使用這一個正確的解決方案：http://www.quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html 帆布模糊背景

我想與爲一個圖像使用固定的背景，所以我可以將相同的非模糊圖像置於頂部，同時具有可變的頁面，這在交換圖像時改變了設計。

我知道我能夠使用CSS3過濾器這一點，但它沒有對Firefox，並且這樣的模糊圖像大的表現是可怕的......

謝謝！

不知道你在問什麼。你需要編碼或設計方面的幫助嗎？請進一步解釋:) – markE

我需要編碼方面的幫助。如何使用這個腳本。我試過，但不知道如何......： –

「我知道我能使用CSS3過濾器這一點，但它沒有在Firefox工作...」

火狐可以做CSS模糊：

首先，包括含SVG文件在網頁

<svg xmlns:svg="http://www.w3.org/2000/svg"> 
    <filter id="gaussian"> 
     <feGaussianBlur id="myBlur" stdDeviation="5" /> 
    </filter> 
</svg>

下一步所需的模糊，讓以正常的方式在畫布元素的引用，例如：

var canvas = document.getElementById('myCanvas');

...和應用過濾器吧：

canvas.style.webkitFilter = 'url(#gaussian)'; 
canvas.style.filter = 'url(#gaussian)';

要更改的模糊值，你需要一個句柄高斯模糊元素本身：

var blurFilter = document.getElementById('myBlur');

使用setStdDeviation（stdDeviationX ，stdDeviationY）方法來改變模糊。這兩個參數是數字，而不是字符串：

blurFilter.setStdDeviation(5, 5);

（似乎工作在Firefox和Chrome的最新版本OK - 儘管Chrome不喜歡當模糊值設置爲0 ...）

2013-11-15 12:25:31 KaliedaRik

謝謝！這是非常全面的:)我做了一個jQuery版本作爲短期「黑客」，直到CSS3過濾器有一個適當的表現。在所有主要（和新的）瀏覽器中的大圖像上看起來真的很糟糕！ –

回答