ctx.getImageData reports Floating point exception: 8 for canvas with 0 width/height

[sang4lv]

Issue

I'm using the latest version 2.0.0-alpha3, and I keep running into Floating point exception: 8

I tried different images, but I still got the same result

Steps to Reproduce

fs.readFile(__dirname + '/static/t1.jpeg', (err, squid) => {
  if (err) throw err;
  const img = new Image;
  const canvas = createCanvas(img.width, img.height);
  const ctx = canvas.getContext('2d');
  img.src = squid;
  ctx.drawImage(img, 0, 0, img.width, img.height); //this is all good
  const imageData = ctx.getImageData(0, 0, img.width, img.height); // return floating point exception: 8
});

Your Environment

• Version of node-canvas (e.g. 1.4.0): 2.0.0-alpha3
• Environment (e.g. node 4.2.0 on Mac OS X 10.8): Mac OS X 10.12.6

[zbjornson]

I will fix that crash, but it's because your image isn't loaded yet and the canvas has zero width. Try something like this: see next comment

fs.readFile(__dirname + '/static/t1.jpeg', (err, squid) => {
  if (err) throw err;
  const img = new Image;
  img.onload = function () {
	const canvas = createCanvas(img.width, img.height);
	const ctx = canvas.getContext('2d');
	ctx.drawImage(img, 0, 0, img.width, img.height); //this is all good
	const imageData = ctx.getImageData(0, 0, img.width, img.height);
  }
  img.onerror = function (e) { console.log("Error", e); }
  img.src = squid;
});

You could also use loadImage:

const { loadImage } = require("canvas");
loadImage(squid).then(() => {
  // image is loaded; safe to do stuff
})

[zbjornson]

Gah, sorry. You're creating the Canvas before img.src = squid, so img.width and img.height are 0, and the canvas then has 0 width and 0 height.