#Canvas problem in discord.js embed

4 messages · Page 1 of 1 (latest)

warm lake

I've been trying to fix this error but still im unable to do that even the picture is in png format
here's the error

/home/container/node_modules/canvas/lib/image.js:94
  SetSource.call(img, src)
            ^
Error: Unsupported image type
    at setSource (/home/container/node_modules/canvas/lib/image.js:94:13)
    at /home/container/node_modules/canvas/lib/image.js:62:11
    at /home/container/node_modules/simple-get/index.js:97:7
    at IncomingMessage.<anonymous> (/home/container/node_modules/simple-concat/index.js:8:13)
    at Object.onceWrapper (node:events:627:28)
    at IncomingMessage.emit (node:events:525:35)
    at endReadableNT (node:internal/streams/readable:1359:12)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Node.js v18.16.0```

And Here's the code i've been using
```js
    else if(command === "testboost")
    {
        const canvas = Canvas.createCanvas(860, 250);
        const ctx = canvas.getContext("2d");

        const background = await Canvas.loadImage("boost.png");
        ctx.drawImage(background, 0, 0, canvas.width, canvas.height);

        ctx.strokeStyle = "#9B59B6";
        ctx.strokeRect(0, 0, canvas.width, canvas.height);

        ctx.font = "38px cursive";
        ctx.textAlign = "center";
        ctx.fillStyle = "#FFFFFF";
        ctx. fillText("Khan", canvas.width / 2, canvas.height / 1.2);

        const avatar = await Canvas.loadImage(user.user.displayAvatarURL({format: "png"}));

        ctx.beginPath();
        ctx.arc(125, 125, 100, 0, Math.PI *2, true);
        ctx.closePath();
        ctx.clip();
        ctx.drawImage(avatar, 25, 25, 200, 200);

        const attachment = new Attachment(canvas.toBuffer(), "boost.png");
        
        const embed = new EmbedBuilder()
        .setColor(0xff00ff)
        .setDescription(`heheehe :grin:`)
        .setImage(`attachment://boost.png`);
        message.channel.send({ embeds: [embed], files: [attachment] });
    }```
warm lake

ok now there's new issue I've updated the code

    else if(command === "testboost")
    {
        const canvas = Canvas.createCanvas(860, 250);
        const ctx = canvas.getContext("2d");

        const background = await Canvas.loadImage("./boost.png");
        ctx.drawImage(background, 0, 0, canvas.width, canvas.height);

        ctx.strokeStyle = "#9B59B6";
        ctx.strokeRect(0, 0, canvas.width, canvas.height);

        ctx.font = "38px cursive";
        ctx.textAlign = "center";
        ctx.fillStyle = "#FFFFFF";
        ctx.fillText("Khan", canvas.width / 2, canvas.height / 1.2);

        ctx.beginPath();
        ctx.arc(125, 125, 100, 0, Math.PI *2, true);
        ctx.closePath();
        ctx.clip();

        const attachment = new Attachment(canvas.toBuffer(), "boost.png");
        
        const embed = new EmbedBuilder()
        .setColor(0xff00ff)
        .setDescription(`heheehe :grin:`)
        .setImage(`attachment://boost.png`);
        message.channel.send({ embeds: [embed], files: [attachment] });
    }```
but still it's showing this error

/home/container/node_modules/discord.js/src/structures/MessagePayload.js:241
if (thing.path) {
^
TypeError: Cannot read properties of undefined (reading 'path')
at findName (/home/container/node_modules/discord.js/src/structures/MessagePayload.js:241:17)
at MessagePayload.resolveFile (/home/container/node_modules/discord.js/src/structures/MessagePayload.js:255:31)
at /home/container/node_modules/discord.js/src/structures/MessagePayload.js:223:85
at Array.map (<anonymous>)
at MessagePayload.resolveFiles (/home/container/node_modules/discord.js/src/structures/MessagePayload.js:223:56)
at TextChannel.send (/home/container/node_modules/discord.js/src/structures/interfaces/TextBasedChannel.js:161:50)
at onUserCommand (/home/container/index.js:1411:19)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
Node.js v18.16.0```

fleet tinselBOT

Files in embeds should be attached via the message option object and referenced in the embed:

const attachment = new AttachmentBuilder('./image.png', { name: 'image1.png' });
const embed = new EmbedBuilder()
  .setTitle('Attachments')
  .setImage(`attachment://${attachment.name}`);

channel.send({
  embeds: [embed],
  files: [attachment]
});
smoky kindle

You probably want something like this ig