Asset help for Discord Canvas

Code Help - Discord
1

I really need help with Canvas Discord requiring files.

(node:3555) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 4): Error: error while reading from input stream

This is my script :

client.on(‘guildMemberAdd’, async member => {
const channel = member.guild.channels.find(ch => ch.name === ‘new-members’);
if (!channel) return;
const canvas = Canvas.createCanvas(700, 250);
const ctx = canvas.getContext(‘2d’);

const background = await Canvas.loadImage('./assets/wallpaper.jpg');
ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
const attachment = new Discord.Attachment(canvas.toBuffer(), 'welcome-image.png');

channel.send(Welcome to the server, ${member}!, attachment);
});

2

assets is not really a folder on the server. The assets are stored on a cdn. If you click the asset you can get its URL. An example …

https://cdn.hyperdev.com/click-me.svg?1477239469954

Edit: the number at the end seems optional, possibly used for the cdn analytics to track which project is using it?

3

The random string is to break any existing browser cache for the asset should you have been using a previous version of the uploaded file.

1 Like
4

I think canvas requires the assets to be stored locally in the project. Try uploading the files via the console using wget url_to_file where url_to_file is the URL you get when you click on the file assets.

5

Thanks everyone, I got it working :slight_smile:

1 Like
6

How did you get it working? I executed wget <asset url>, and then reloaded my project. Same error.

7

It sounds like you imported the image to your root directory. Try following these steps: Assets folder path

8

I still cant get this to work
i am getting no error
CODE:
const background = await Canvas.loadImage(__dirname + ‘/assets/wallpaper.jpg’);
// This uses the canvas dimensions to stretch the image onto the entire canvas
ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
// Use helpful Attachment class structure to process the file for you
const attachment = new MessageAttachment(canvas.toBuffer(), ‘welcome-image.png’);
console.log(attachment)

when i console.log(attachment) ` i get:
MessageAttachment {

8:15 AM

message:

8:15 AM

<Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 02 bc 00 00 00 fa 08 06 00 00 00 43 24 94 1b 00 00 00 06 62 4b 47 44 00 ff 00 ff 00 ff a0 bd a7 … >,

8:15 AM

id: undefined,

8:15 AM

filename: undefined,

8:15 AM

filesize: undefined,

8:15 AM

url: undefined,

8:15 AM

proxyURL: undefined,

8:15 AM

height: undefined,

8:15 AM

width: undefined }

9

Can you surround your code in code blocks? Same with your logs? Thanks.