html画布形状模糊过滤器

Question

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

Answer 1

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

例子：

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

您可以再次取消模糊画布：

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

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

Answer 2

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

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

它仍然是实验性的，但受到 chrome 和 firefox atm 的支持。

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 滤波器实现高斯模糊。 见演示。