I train to make a Canvas using the examples from the documentation.
But for some reason, the code from the example does not work.
What's wrong?
■■■■■■ERROR■■■■■■■
/discord-bot/index.js:143
ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
^
TypeError: Image or Canvas expected
at Client.client.on.message (/discord-bot/index.js:143:9)
at Client.emit (events.js:194:15)
at MessageCreateAction.handle (/discord-bot/node_modules/discord.js/src/client/actions/MessageCreate.js:31:14)
at Object.module.exports [as MESSAGE_CREATE] (/discord-bot/node_modules/discord.js/src/client/websocket/handlers/MESSAGE_CREATE.js:4:32)
at WebSocketManager.handlePacket (/node_modules/discord.js/src/client/websocket/WebSocketManager.js:386:31)
at WebSocketShard.onPacket (/node_modules/discord.js/src/client/websocket/WebSocketShard.js:436:22)
at WebSocketShard.onMessage (/node_modules/discord.js/src/client/websocket/WebSocketShard.js:293:10)
at WebSocket.onMessage (/discord-bot/node_modules/ws/lib/event-target.js:132:16)
at WebSocket.emit (events.js:189:13)
at Receiver.receiverOnMessage (/discord-bot/node_modules/ws/lib/websocket.js:825:20)
■■■■■■CODE■■■■■■■
const Discord = require("discord.js");
const Canvas = require('canvas');
client.on('message', message => {
if (message.content === '!test') {
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 = Canvas.loadImage('./logo.jpg');
ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
const attachment = new Discord.Attachment(canvas.toBuffer(), 'logo.png');
msg.channel.send(`Testing...`, attachment);
}
});
It takes time for canvas to load an image so it needs to be asynchronous
const Discord = require("discord.js");
const Canvas = require('canvas');
client.on('message', async message => {
if (message.content === '!test') {
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('./logo.jpg');
ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
const attachment = new Discord.MessageAttachment(canvas.toBuffer(), 'message.png'); 'logo.png');
msg.channel.send(`Testing...`, attachment);
}
});
Edit: OP used const attachment = new Discord.Attachment(canvas.toBuffer(), 'logo.png');
instead of the right version const attachment = new Discord.MessageAttachment(canvas.toBuffer(), 'logo.png');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.