Code stops without throwing an error

[Aci-yt]

So I wanted to start using canvas, and followed this (https://discordjs.guide/#/popular-topics/canvas) tutorial. I didn't use the code 1:1, but had multiple people verify that my code should work, but doesn't.

Whenever it gets to this line: const background = await Canvas.loadImage('./encounter.png');, my code stops without any errors, as if I stopped the bot myself. I tired catching an error with .catch(), didn't work. I also tried try{}catch{}, which didn't help either.
After I asked in the Discord.js and Coding Den Discord servers I was told to ask here, since they assumed that it's an error with canvas itself.
Any other commands which are unrelated to canvas work, which leads me to the same conclusion.

(And yes, the image "encounter.png" does exist in the specified path)

This is my code:

const Discord = require('discord.js');
const Canvas = require('canvas');
const snekfetch = require('snekfetch');
const config  = require("./config.json")
const bot = new Discord.Client();

bot.on('ready', () => {
	console.log('Ready!');
});

bot.on('message', async message => {
    
const args = message.cleanContent.slice(config.prefix2.length).trim().split(/ +/g);
const cmd = args.shift().toLowerCase();

if (cmd =="doit"){
	try{
		const canvas = Canvas.createCanvas(700, 250);
		// ctx (context) will be used to modify a lot of the canvas
		const ctx = await canvas.getContext('2d');
		// Since the image takes time to load, you should await it
		const background = await Canvas.loadImage('./encounter.png').catch((error) => console.log(error))
		// 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 Discord.Attachment(canvas.toBuffer(), 'welcome-image.png');
	
		message.channel.send(`Welcome to the server, ${message.author.id}!`);

	} catch(error){
		console.log(error)
	}
}

});
bot.login(config.token2);

-I'm using Visual Studio Code on Windows 10
-Its not running off of a batch-file
-The canvas version I'm using is [email protected]

Thanks in advance,
Aci

[Hakerh400]

Able to reproduce segfault on Node.js v11.2.0 and node-canvas 2.2.0 using the following code

new Image().src = Buffer.from('89504E470D', 'hex');

Can you please share encounter.png file to make sure this is the same issue.

[Aci-yt]

Sure, here it is

[Hakerh400]

@Acituanbus I cannot reproduce crash using your image. What is the Node.js exit code
(output of echo %errorlevel%)?

@meyfa Your issue seems unrelated to PNG (and I cannot reproduce it). It's weird that your code crashes the process, since creating canvas doesn't actually allocate anything until a surface is obtained. Does it crash on createCanvas , or getContext('2d')? What is the process exit code (errorlevel)?

[Aci-yt]

Not sure how I get the node exit code, could you explain that? Thanks ^^

[Hakerh400]

In case Node.js process is started from the console, the exit code can be obtained by typing echo %errorlevel% (on Windows) or echo $? on Linux and Mac in the console after Node.js process exits. In case of Visual Studio or other third-party application that launches Node.js, I'm not sure.

As said above, the issues reported here seem to be related to a bug in old Node.js v8.x versions. Please try upgrading to Node.js v8.12.0 and see if the bug persists.

[Aci-yt]

Alright, so I just checked and THIS code works just fine:

if (cmd =="doit"){
	try{
		const canvas = Canvas.createCanvas(256, 256);
		// ctx (context) will be used to modify a lot of the canvas
		const ctx = await canvas.getContext('2d');
		// Since the image takes time to load, you should await it
		const background = await Canvas.loadImage('https://i.imgur.com/6BCuej8.png').catch((error) => console.log(error))
		// 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 Discord.Attachment(canvas.toBuffer(), 'welcome-image.png');
	
		message.channel.send(`Welcome to the server, ${message.author.id}!`);

	} catch(error){
		console.log(error)
	}
}

but when I replace the imgur url with this one:
https://i.imgur.com/11bjsFz.png it crashes without an error
Any idea why? Can images not be transparent?

[zbjornson]

@Acituanbus the non-working image (11bjsFz) has an sRGB chunk that I think is causing the failure. This came up once before (#289 (comment) -- although they say "libpng didn't like [it]," it's cairo, not libpng).

We need to drop cairo's toy PNG reader and replace it with libpng for a variety of reasons (this, #73 and #122). That's a fair amount of work; @Hakerh400 might be working on it, but in any case we'll hopefully get it fixed in the next few months. Meanwhile you could try using ffmpeg or similar to re-encode your PNGs first.

[Aci-yt]

Alright, though I have no experience with ffmpeg and no idea how it works, I'll see if I can figure it out
Thanks!

[Aci-yt]

So I tried telling ffmpeg to convert the png file to a png file again, it worked but the new image doesn't work with node-canvas either
Did I do something wrong?

[Hakerh400]

@Acituanbus Can you please run the following code and post the full output.

const Canvas = require('canvas')
console.log(process.version)
for(var key in Canvas)
if(/version$/i.test(key))
console.log(`${key}: ${Canvas[key]}`)

@zbjornson Tested using latest Cairo version 1.16.0 and it properly handles sRGB, cHRM and similar chunks, and also throws proper error on the missing IEND chunk (loads properly #73 and #122 and catches #1324 error). If you can confirm it, we may close the linked issues (including this one, if it turns out to be outdated cairo) as fixed and suggest updating cairo.

[Aci-yt]

I did, this was the output:

version: 2.0.1
test.js:35
cairoVersion: 1.15.12
test.js:35
jpegVersion: 8
test.js:35
gifVersion: 5.1.4
test.js:35
freetypeVersion: 2.9.1

(This was my code:)

for(var key in Canvas){
    if(/version$/i.test(key))
    console.log(`${key}: ${Canvas[key]}`)
}

[Aci-yt]

So any idea?

[zbjornson]

@Acituanbus the two imgur links are dead, but the image you posted in #1321 (comment) loads successfully for me on Win 10 with canvas v2.0.1 and v2.3.1. Does that image work for you? If not, can you please upload the failing image here?

[kemosaf]

Alright, so I just checked and THIS code works just fine:

if (cmd =="doit"){
	try{
		const canvas = Canvas.createCanvas(256, 256);
		// ctx (context) will be used to modify a lot of the canvas
		const ctx = await canvas.getContext('2d');
		// Since the image takes time to load, you should await it
		const background = await Canvas.loadImage('https://i.imgur.com/6BCuej8.png').catch((error) => console.log(error))
		// 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 Discord.Attachment(canvas.toBuffer(), 'welcome-image.png');
	
		message.channel.send(`Welcome to the server, ${message.author.id}!`);

	} catch(error){
		console.log(error)
	}
}

but when I replace the imgur url with this one:
https://i.imgur.com/11bjsFz.png it crashes without an error
Any idea why? Can images not be transparent?

Niceeeeeeeeeeeeeeee ty, this helped