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

Canvas blur function - no third party plug-ins

本文关键字：第三方 插件 功能 布模糊 模糊      更新时间：2023-09-26

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

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

在你发布的例子中，改变目标图像的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过滤器/feGaussianBlur属性应该是最简单的使用，为您的需要。

试试这个:

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

相关文章：