使用canvas nodeJS模糊图像 [英] Blurring image with canvas nodeJS

问题描述

似乎 ctx.filter ="blur(amount)" 不起作用.这是我的代码:

It seems like ctx.filter = "blur(amount)" doesn't work. Here's my code:

const {
    body
} = await request.get(
    url
);
const data = await Canvas.loadImage(body);
ctx.filter = "blur(50px)"
ctx.drawImage(data, 0, 0, canvas.width, canvas.heigth)
const final = new Discord.MessageAttachment(
    canvas.toBuffer(),
    "blurred.png"
);

是的，是不和谐的.

推荐答案

实际上，他们仍然不支持此功能.
这是跟踪功能请求的问题.

Indeed they still don't support this feature.
Here is the issue tracking the feature request.

显然，这些滤镜不是内置于节点画布使用的渲染引擎Cairo的，但是显然Skia是节点画布可以在不久的将来切换到的另一种渲染引擎.因此，希望有一天会到来，但就目前而言，我们必须自己实施.

Apparently, these filters are not built-in Cairo, the rendering engine used by node-canvas, however Skia, an other rendering engine that node-canvas could switch to in the near future apparently does. So there is hope it comes one day, but for the time being, we have to implement it ourselves.

对于高斯模糊，您可以查看 StackBlur.js 项目，该项目是在浏览器本地实现之前，事实模糊过滤器库.以下是一个小故障项目.

For gaussian blur, you can look at the StackBlur.js project, which was the de-facto blur filter library before browsers implement it natively. Here is a glitch project as an example.

这篇关于使用canvas nodeJS模糊图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！