CODEWITHSUNDEEP
javascriptnode.jscanvas
cinoez
cinoez

Reputation: 33

Blurring image with canvas nodeJS

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

Yeah it's for Discord.

Upvotes: 2

Views: 3634

Answers (1)

Kaiido
Kaiido

Reputation: 136658

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

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.

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.

Upvotes: 1

Related Questions