帆布模糊背景

Question

我关于帆布新手，我搜索了很多和尝试，但从来没有完成找到使用这一个正确的解决方案：http://www.quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html

我想与为一个图像使用固定的背景，所以我可以将相同的非模糊图像置于顶部，同时具有可变的页面，这在交换图像时改变了设计。

我知道我能够使用CSS3过滤器这一点，但它没有对Firefox，并且这样的模糊图像大的表现是可怕的......

谢谢！

Answer 1

“我知道我能使用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 ...）