javascript - Canvas 模糊功能——无第三方插件

Question

我一直在 Internet 上搜索模糊 Canvas 图像的简单方法。我以为很容易找到有关如何编写高斯模糊函数的信息，但每次我找到一些东西时，它总是包含很多不需要的函数，比如动画等等。我只想拍摄图像 -> 在 Canvas 中绘制 -> 模糊图像 -> 将图像输出到数据 code> -> 将数据应用于 div 元素 -> 然后删除 canvas 元素。

我看到这个关于运动模糊的:Better canvas motion blur这不需要那么多代码。我如何做类似的事情，但在高斯模糊而不是运动模糊中？

Answer 1

在您发布的示例中，更改目标图像的 HTML5 globalAlpha 属性以更改其不透明度，然后图像在不同的垂直点上绘制 10 次以创建运动模糊的错觉。

对于正常的高斯模糊，您可以使用常规的 CSS3 filter/feGaussianBlur 属性。在这里查看示例:

http://css-plus.com/2012/03/gaussian-blur/

特别是名为“应用于 SVG 图像元素的 SVG 模糊滤镜”的部分

有更多技术可以做到这一点，包括如下所示的 Javascript 插件:

• http://blurjs.com/
• http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

但是，CSS3 filter/feGaussianBlur 属性应该是最简单易用的，可以满足您的需求。