Automattic / Automattic/node-canvas

.png image visual corruption over 1mb

Open
#1,772 1 comment 0 reactions 0 assignees View on GitHub
Needs more info
Dominant language
JavaScript
Stars
10.7k
Forks
1.2k
Avg merge
4d 8h
Merged PRs (30d)
1

Description

## Issue
Certain images that I am trying to manipulate in node-canvas visually corrupt when loaded. It looks psychedelic.
I've downloaded hundreds of these images from discord and only those that are **.pngs** and **over 1 mb** do this, and they all do it.
If I copy the image and save it to a new file, the issue doesn't occur in the new image.
I've done a few tests but I am too amateur to figure out where the issue is coming from.
Here is the image and resulting mess in question:

## Steps to Reproduce
```js
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);
write(imgCanv); // or some other function to do something with it
}
```
Save the image above as image.png, load it, and write it again.

(If someone could actually try this to see if it is just a me issue, that would be greatly appreciated)
## Your Environment
* Version of node-canvas: canvas@2.7.0
* Environment: node.js v14.16.0

(apologies if this is a known issue or obvious. I've tried looking and can't find any mention of something like this.)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.