Yafim Simanovsky Yafim Simanovsky - 1 year ago 133
AngularJS Question

Canvas & Color-Thief image index size

I'm using

to analyze the colors of images. I'm using a canvas and
, I'm getting the following error message in the console:

Error: Index or size is negative or greater than the allowed amount

I'm not sure if this is a canvas issue coming from image pixel size or if it's some bug in another library (I'm also using AngularJS) but I'm stuck and not sure what I can do.

I think there is an issue with pixel count being 0, when I add the
line to the following code inside color-thief.js then I get "0 0" for some images.

Crucial point --> the
show 0 only for SOME images, while the rest it shows ratios that make sense like 1280 922 or 2000 1333.

var CanvasImage = function (image) {
this.canvas = document.createElement('canvas');
this.context = this.canvas.getContext('2d');


this.width = this.canvas.width = image.width;
this.height = this.canvas.height = image.height;

console.log(image.width, image.height);

this.context.drawImage(image, 0, 0, this.width, this.height);

Any idea why this can happen?

Answer Source

The answer was to add the image.addEventListener("load", function() { ... } to the code to load the image correctly.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download