jQuery & Canvas Image Crop - Index or size is negative or greater than the allowed amount

Question

I have installed the Canvas Image Crop plugin from CodeCanyon and I had an issue in firefox.

I was getting the following error with some (not all) images I uploaded: Index or size is negative or greater than the allowed amount.

I am using the HTML5 canvas version of the plugin.

Answer 1

I found the error and it was firefox does not allow fractions/0 in the canvas drawImage call.

So you need to find the following line in your JS:

ctx.drawImage(img, x, y, w, h, 0, 0, width, height);

and add this before it to round the values:

w = Math.round(w);
h = Math.round(h);
width = Math.round(width);
height = Math.round(height);

ctx.drawImage(img, x, y, w, h, 0, 0, width, height);

That should fix the issue

Hopefully this helps someone else at some point!