javascript - html画布形状模糊过滤器

Question

必须有办法做到这一点。我用 html5 画布绘制了一个形状，我想模糊它。据我所知，没有本地方法，所以我假设需要一个 js 库。问题是大多数库只对像这样的图像进行模糊处理。这可能吗？

Answer 1

myContext.filter = 'blur(10px)';

Canvas 2D API 的 CanvasRenderingContext2D.filter 属性提供模糊或灰度等滤镜效果。它类似于 CSS 过滤器属性并接受相同的功能。https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter

它仍处于试验阶段，但受 chrome 和 firefox atm 支持。

Answer 2

您可以使用 CSS 来模糊画布。如果它只是您想要模糊的形状，那么该形状将需要位于其自己的单独图层（画布）上，您可以动态创建该图层。

例子：

canvas.style.webkitFilter = "blur(3px)";

您可以使用以下方法再次取消模糊画布：

canvas.style.webkitFilter = "blur(0px)";

这可能是模糊画布的最快（也是最简单）的方法——尤其是对于移动设备。

Answer 3

对于几乎是高斯的快速模糊，我建议使用 StackBlur： http ://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

或者，您可以使用此 Superfast Box Blur 进行 2 次迭代： http ://www.quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html

Answer 4

您链接到的 pixastic 库示例实际上应该使用画布元素作为第一个参数而不是图像。

默认情况下，pixastic 库将尝试用它创建的画布元素替换您传入的节点。为了防止它这样做，您可以包含一个选项来指定离开 DOM 节点并包含一个回调来自己处理返回的数据。像这样的东西：

Pixastic.process(canvas, "blur", { leaveDOM: true }, function(img) {
    canvas.getContext('2d').drawImage(img, 0, 0);
});

或者，如果您不想依赖库，您可以使用 getImageData() 自己实现模糊，操作返回的像素数据并使用 putImageData() 将模糊图像绘制回画布。

需要注意的另一件事是，单个像素的处理速度很慢，并且可能不适用于大图像。如果这是一个问题，您可以尝试缩小图像并放大图像以获得快速完成的模糊效果。像这样的东西：

ctx.drawImage(canvas, 0, 0, canvas.width / 2, canvas.height / 2);
ctx.drawImage(canvas, 0, 0, canvas.width / 2, canvas.height / 2, 0, 0, canvas.width, canvas.height);

Answer 5

https://github.com/nodeca/glur - 它通过 IIR 滤波器实现高斯模糊。见演示。