1

When trying to use canvas to blur an image of text in NodeJS, it simply does nothing. This is an example of a Discord bot that's supposed to return a blurred image of the text "Hello World" in SansSerif, but what it actually returns is this

    //create canvas and context
    let cnvs = canvas.createCanvas(740, 260)
    let ctx = cnvs.getContext('2d')

    //set the context filter to blur
    ctx.filter = 'blur(10px)';
    //set the context font to sans serif size 48
    ctx.font = '48px serif';
    //add the text on the image
    ctx.fillText('Hello world', 50, 100);

    //send the image as a message attachment
    message.channel.send({files: [{ attachment: cnvs.toBuffer() }]}).catch(allerrors)

None of the other context filters work either, all return the exact same image. I don't get any errors or warnings, it acts as if everything worked as intended.

Does anyone know what could cause this? Is there another workaround for turning an image grayscale, changing the hue or blurring it?

Zsolt Meszaros
  • 21,961
  • 19
  • 54
  • 57
Aci
  • 546
  • 5
  • 22
  • 3
    I don't think `node-canvas` supports the filter API. Check out https://github.com/Automattic/node-canvas/issues/1063 – Zsolt Meszaros Feb 12 '22 at 12:10
  • I see, can you think of another way to turn an image grayscale then? – Aci Feb 12 '22 at 12:12
  • 1
    To turn it into grayscale, you could probably manipulate pixel data. It's described here: https://github.com/Automattic/node-canvas/issues/1373#issuecomment-465662678 – Zsolt Meszaros Feb 12 '22 at 12:21
  • the fact that this can be done in just a single line in jimp and requires this code in canvas is kind of sad... – Aci Feb 12 '22 at 14:11

0 Answers0