6

我一直在互联网上寻找一种简单的方法来模糊画布图像。我认为很容易找到有关如何编程高斯模糊功能的信息，但每次我找到一些东西时，它总是包含很多不需要的功能，如动画等。我想要的只是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.

我看到这个关于运动模糊的：更好的画布运动模糊不需要那么多代码。我该如何做类似的事情，但在高斯模糊而不是运动模糊？

4

2 回答 2

3

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

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

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

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

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

但是，根据您的需要，CSS3 过滤器/feGaussianBlur 属性应该是最简单易用的。

于 2013-06-05T07:41:45.670 回答
1

试试这个：

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

模糊（“我的画布”）；

于 2013-12-08T00:33:37.830 回答