Question

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

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

Answer 1

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

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

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

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

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

但是，CSS3过滤器/ feGaussianBlur属性应该是最简单的，以满足您的需求。

Answer 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);
    }
};

模糊（ “myCanvas”）;

画布模糊功能 - 没有第三方插件

2 个答案: