admin管理员组

文章数量:1022949

I am trying to add a rank card in my discord bot, and in order to do so I am trying to use canvas but when I use canvas everything works fine until I hit the .drawImage method. Where it gives me an error saying "TypeError: Image or Canvas expected". Although I've already required canvas globally, and everything else that has to do with canvas works properly aswell.

I've tried to require('canvas') inside the function but that doesn't fix the problem either.

const canvas = Canvas.createCanvas(934, 282);
const ctx = canvas.getContext('2d');
const background = Canvas.loadImage('./images/Rank_Card.jpg');

ctx.drawImage(background, 0, 0, canvas.width, canvas.height);  
const attachment = new Discord.Attachment(canvas.toBuffer(), 'wele-image.png');
msg.channel.send(`Testing...`, attachment);

When it sends the message it should attach the image with it, but right now its just giving me the following error.

Error:

C:\Users\Desktop\Discord\iBot\ibot.js:25
    ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
        ^

TypeError: Image or Canvas expected

I am trying to add a rank card in my discord bot, and in order to do so I am trying to use canvas but when I use canvas everything works fine until I hit the .drawImage method. Where it gives me an error saying "TypeError: Image or Canvas expected". Although I've already required canvas globally, and everything else that has to do with canvas works properly aswell.

I've tried to require('canvas') inside the function but that doesn't fix the problem either.

const canvas = Canvas.createCanvas(934, 282);
const ctx = canvas.getContext('2d');
const background = Canvas.loadImage('./images/Rank_Card.jpg');

ctx.drawImage(background, 0, 0, canvas.width, canvas.height);  
const attachment = new Discord.Attachment(canvas.toBuffer(), 'wele-image.png');
msg.channel.send(`Testing...`, attachment);

When it sends the message it should attach the image with it, but right now its just giving me the following error.

Error:

C:\Users\Desktop\Discord\iBot\ibot.js:25
    ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
        ^

TypeError: Image or Canvas expected
Share Improve this question edited Nov 30, 2020 at 13:14 Tyler2P 2,37030 gold badges25 silver badges33 bronze badges asked Oct 17, 2019 at 3:42 anonymousanonymous 691 gold badge2 silver badges9 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 6

node-canvas' loadImage() method returns a Promise which get resolved to an <Image>.

You can't pass this Promise directly, you'll have to await for it:

const canvas = Canvas.createCanvas(934, 282);
const ctx = canvas.getContext('2d');
// we need to await the Promise gets resolved since loading of Image is async
const background = await Canvas.loadImage('./images/Rank_Card.jpg');

ctx.drawImage(background, 0, 0, canvas.width, canvas.height);  
const attachment = new Discord.Attachment(canvas.toBuffer(), 'wele-image.png');
msg.channel.send(`Testing...`, attachment);

I am trying to add a rank card in my discord bot, and in order to do so I am trying to use canvas but when I use canvas everything works fine until I hit the .drawImage method. Where it gives me an error saying "TypeError: Image or Canvas expected". Although I've already required canvas globally, and everything else that has to do with canvas works properly aswell.

I've tried to require('canvas') inside the function but that doesn't fix the problem either.

const canvas = Canvas.createCanvas(934, 282);
const ctx = canvas.getContext('2d');
const background = Canvas.loadImage('./images/Rank_Card.jpg');

ctx.drawImage(background, 0, 0, canvas.width, canvas.height);  
const attachment = new Discord.Attachment(canvas.toBuffer(), 'wele-image.png');
msg.channel.send(`Testing...`, attachment);

When it sends the message it should attach the image with it, but right now its just giving me the following error.

Error:

C:\Users\Desktop\Discord\iBot\ibot.js:25
    ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
        ^

TypeError: Image or Canvas expected

I am trying to add a rank card in my discord bot, and in order to do so I am trying to use canvas but when I use canvas everything works fine until I hit the .drawImage method. Where it gives me an error saying "TypeError: Image or Canvas expected". Although I've already required canvas globally, and everything else that has to do with canvas works properly aswell.

I've tried to require('canvas') inside the function but that doesn't fix the problem either.

const canvas = Canvas.createCanvas(934, 282);
const ctx = canvas.getContext('2d');
const background = Canvas.loadImage('./images/Rank_Card.jpg');

ctx.drawImage(background, 0, 0, canvas.width, canvas.height);  
const attachment = new Discord.Attachment(canvas.toBuffer(), 'wele-image.png');
msg.channel.send(`Testing...`, attachment);

When it sends the message it should attach the image with it, but right now its just giving me the following error.

Error:

C:\Users\Desktop\Discord\iBot\ibot.js:25
    ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
        ^

TypeError: Image or Canvas expected
Share Improve this question edited Nov 30, 2020 at 13:14 Tyler2P 2,37030 gold badges25 silver badges33 bronze badges asked Oct 17, 2019 at 3:42 anonymousanonymous 691 gold badge2 silver badges9 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 6

node-canvas' loadImage() method returns a Promise which get resolved to an <Image>.

You can't pass this Promise directly, you'll have to await for it:

const canvas = Canvas.createCanvas(934, 282);
const ctx = canvas.getContext('2d');
// we need to await the Promise gets resolved since loading of Image is async
const background = await Canvas.loadImage('./images/Rank_Card.jpg');

ctx.drawImage(background, 0, 0, canvas.width, canvas.height);  
const attachment = new Discord.Attachment(canvas.toBuffer(), 'wele-image.png');
msg.channel.send(`Testing...`, attachment);

本文标签: