Automattic / Automattic/node-canvas

Canvas render image fail (?)

Open
#2,389 0 comments 0 reactions 0 assignees View on GitHub
Bug
Dominant language
JavaScript
Stars
10.7k
Forks
1.2k
Avg merge
4d 8h
Merged PRs (30d)
1

Description

For examples(you should has "./test.png" file and "./images" folder):
```
const canvas = require('canvas');
const fs = require('fs');

async function main(){
cv = canvas.createCanvas(500, 500);
ctx = cv.getContext('2d');
img = await canvas.loadImage('./test.png');
width = 250;
height = 250;
cut = 0;
for (;;) {
width --;
height --;
cut ++;
if (width < -5 || height < -5) {
width = 250;
height = 250;
}
ctx.clearRect(0, 0, 500, 500);
ctx.drawImage(img, 0, 0, width, height);
buf = cv.toBuffer('image/png');
fs.writeFileSync(`./images/${cut}.png`, buf);
console.log(width, height, cut);
}
}

main();
```

if the width < 0 or height < 0, canvas.toBuffer will return null value(isnot "null").

how to fix?

add this code:
```
canvas.CanvasRenderingContext2D.prototype._drawImage = canvas.CanvasRenderingContext2D.prototype.drawImage
canvas.CanvasRenderingContext2D.prototype.drawImage = function(im, x, y, w, h){ //not perfect
if (w < 0 || h < 0) return;
this._drawImage(im, x, y, w, h);
}
```

but this is not perfect, because this function has other usage.

(I am a Chinese, so my English is not good.)

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.