画布模糊功能——无第三方插件答案

【问题标题】：Canvas blur function - no third party plug-ins画布模糊功能——无第三方插件
【发布时间】：2013-06-05 07:26:09
【问题描述】：

我一直在互联网上寻找一种简单的方法来模糊画布图像。我认为很容易找到有关如何编程高斯模糊功能的信息，但每次我找到一些东西时，它总是包含很多不需要的功能，如动画等。我想要的只是take an image -> draw it in canvas -> blur image-> output image to data -> apply the data to a div element -> then delete the canvas element.

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

【问题讨论】：

标签： javascript blur

【解决方案1】：

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

对于正常的高斯模糊，您可以使用常规的 CSS3 过滤器/feGaussianBlur 属性。在此处查看示例：

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

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

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

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

【讨论】：

我确实要求的不是第三方插件，但我喜欢 CSS 部分。我最讨厌这一切的主要是所有内容都必须针对每个浏览器进行优化。但是谢谢:)

【解决方案2】：

试试这个：

blur = function (canvasId) {

    var c = document.getElementById(canvasId);
    var ctx = c.getContext("2d");
    ctx.globalAlpha = 0.3;

    var offset = 3;

    for (var i=1; i<=8; i+=1) {
        ctx.drawImage(c, offset, 0, c.width - offset, c.height, 0, 0, c.width-offset, c.height);
        ctx.drawImage(c, 0, offset, c.width, c.height - offset, 0, 0,c.width, c.height-offset);
    }
};

模糊（“我的画布”）；

【讨论】：

这是如何实现的？ ctx 没有声明，所以我猜你在调用这个函数之前已经设置了一些其他的 2D 画布元素。你叫模糊（myCanvas）； ??提前致谢。
不，你打电话给 blur("mycanvasID");
ctx 仍然没有在任何地方声明，所以这不起作用
确实，上面写着var ctx = c.getContext("2d");。不是宣布了吗？这是元素的二维上下文。