I'm very new to coding so I'm just piecing everything together from tutorials.
Anyway, when I try to use Canvas.loadImage() on certain, large .png files, they visually corrupt. It doesn't happen with .jpgs, and it only happens with these specific images I've downloaded from discord. And only if they are over a megabyte.
If I open a new image in paint and paste the original, and save it in a .png, I can run that image through, and it won't corrupt. So does anybody know why it is corrupting? And if it isn't something I am doing, how to I re-encode them on the fly so that it won't corrupt.
I've tried to do this two/three separate ways and they all produce the same result:
First as a callback (is that the right terminology?)?:
function test(){
const imgCanv = Canvas.createCanvas(1284,2778); //the size doesn't matter, it breaks no matter what
const ctx = imgCanv.getContext("2d");
const img = Canvas.loadImage("image.png");
img.then((img) => {
ctx.drawImage(img,0,0);
var out = fs.createWriteStream("result.png")
var stream = imgCanv.pngStream();
stream.on("data", function(chunk){
out.write(chunk);
});
stream.on("end", function(){
console.log("Success");
});
}).catch(err =>{
console.log("An error occured:" + err);
})
}
test();
And also the way they suggest in the documentation, with img.onload:
function test(){
const imgCanv = Canvas.createCanvas(1284,2778); //the size doesn't matter, it breaks no matter what
const ctx = imgCanv.getContext("2d");
const img = new Canvas.Image();
img.onload = () => ctx.drawImage(img, 0, 0);
img.onerror = err => { throw err };
img.src = "image.png";
var out = fs.createWriteStream("result.png")
var stream = imgCanv.pngStream();
stream.on("data", function(chunk){
out.write(chunk);
});
stream.on("end", function(){
console.log("Success");
});
}
test();
I can't post images so here are links:
(I tried to use a sample image but it wouldn't corrupt, even if I followed the exact same procedure. It must be either something Discord is doing, or something in the original screenshot. No idea.)
