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

标签 javascript blur

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

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

最佳答案

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

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

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

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

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

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

关于javascript - Canvas 模糊功能——无第三方插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16933903/

相关文章:

javascript - jQuery 模糊 div 不在焦点

javascript - 异步回调不可能嵌套

javascript - 使用 JavaScript 格式化字符串

android - 模糊 ArcGIS map View

delphi - 为什么我的图标在带有 TTrayIcon 的托盘栏上很难看?

相机中使用的Android模糊surfaceview

javascript - 如何在静态文件中使用django模板语法

javascript - 视频无法在移动设备上自动播放

javascript - 使用 JavaScript 解压缩文件

css - 使用背景过滤器 : blur 时无法去除滚动时的模糊边缘