Javascript html画布形状模糊过滤器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3468038/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html canvas shape blur filter
提问by Justin Bull
There must be a way to do this. I have drawn a shape with the html5 canvas and I would like to blur it. As far as I know there is no native method so I assume a js library is needed. The problem is most libraries only blur images like thisone for example. Is this possible?
必须有办法做到这一点。我用 html5 画布绘制了一个形状，我想模糊它。据我所知，没有本地方法，所以我假设需要一个 js 库。问题是大多数图书馆只模糊像这样的图像。这可能吗？
回答by Jarrod
you can use CSS to blur the canvas. If it's just the shape you want to blur then the shape will need to be on its own separate layer (canvas), which you could create on the fly.
您可以使用 CSS 来模糊画布。如果它只是您想要模糊的形状，那么该形状将需要位于其自己的单独图层（画布）上，您可以即时创建该图层。
Example:
例子：
canvas.style.webkitFilter = "blur(3px)";
You can un-blur the canvas again with:
您可以再次取消模糊画布：
canvas.style.webkitFilter = "blur(0px)";
This is probably the fastest (and simplest) way to blur a canvas - especially for mobile devices.
这可能是模糊画布的最快（也是最简单）的方法——尤其是对于移动设备。
回答by Quasimondo
For a fast blur that is almost Gaussian I'd recommend StackBlur: http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
对于几乎是高斯的快速模糊，我建议使用 StackBlur：http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
Alternatively you could use this Superfast Box Blur with 2 iterations: http://www.quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html
或者，您可以使用此 Superfast Box Blur 进行 2 次迭代：http: //www.quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html
回答by junvar
myContext.filter = 'blur(10px)';
The CanvasRenderingContext2D.filter property of the Canvas 2D API provides filter effects like blurring or gray-scaling. It is similar to the CSS filter property and accepts the same functions. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter
画布 2D API 的 CanvasRenderingContext2D.filter 属性提供模糊或灰度等过滤效果。它类似于 CSS filter 属性并接受相同的功能。https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter
it's still experimental but is supported by chrome & firefox atm.
它仍然是实验性的，但受到 chrome 和 firefox atm 的支持。
回答by Kyle Jones
The pixastic library example you've linked to should actually work with a canvas element as the first argument rather than an image.
您链接到的 pixastic 库示例实际上应该使用画布元素作为第一个参数而不是图像。
By default the pixastic library will try to replace the node you pass in with the canvas element that it creates. To prevent it from doing so you can include an option to specify to leave the DOM node and include a callback to handle the returned data yourself. Something like this:
默认情况下，pixastic 库会尝试用它创建的画布元素替换您传入的节点。为了防止它这样做，您可以包含一个选项来指定离开 DOM 节点并包含一个回调来自己处理返回的数据。像这样的东西：
Pixastic.process(canvas, "blur", { leaveDOM: true }, function(img) {
canvas.getContext('2d').drawImage(img, 0, 0);
});
Alternatively, if you don't want to depend on a library, you can implement a blur yourself using getImageData(), manipulating the returned pixel data and using putImageData() to draw the blurred image back to the canvas.
或者，如果您不想依赖库，您可以使用 getImageData() 自己实现模糊，操作返回的像素数据并使用 putImageData() 将模糊图像绘制回画布。
One other thing to note is that individual pixel manipulation is slow and may not work well for large images. If that's a problem, you might try scaling the image down and scaling back up for a quickly done blur like effect. Something like this:
需要注意的另一件事是单个像素操作很慢，并且可能不适用于大图像。如果这是一个问题，您可以尝试缩小图像并放大图像以获得快速完成的模糊效果。像这样的东西：
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);回答by Vitaly
https://github.com/nodeca/glur- it implements gaussian blur via IIR filter. See demos.
https://github.com/nodeca/glur- 它通过 IIR 滤波器实现高斯模糊。见演示。
