cstefanache / angular2-img-cropper

Angular 2 Image Cropper
MIT License
364 stars 135 forks source link

IndexSizeError in IE+Edge #138

Open akliuiko opened 7 years ago

akliuiko commented 7 years ago

Hi @cstefanache !

I faced with such problem as IndexSizeError in IE/Edge browser. This issue is a result of a bug in browser, that throws exception if crop coordinates are greater or equal canvas bounds. To avoid this error, we need to check crop width/height < canvas.width/canvas.height (we can simply decrease crop size or increase canvas size). This error takes place in row:

ctx.drawImage(this.buffer, bounds.left, bounds.top, Math.max(bounds.width, 1),
                    Math.max(bounds.height, 1), bounds.left, bounds.top, bounds.width, bounds.height);

imageCropper.ts: row 213 in draw() Just to mention. this problem doesn't appear if quadratic image is loaded (width=height). As for me, I do it this way:

if(image.width != image.height){
        let delta = 1;
        if(canvas.width <= cropWidth || canvas.height <= cropHeight){
            canvas.width = cropWidth + delta;
            canvas.height= cropHeight + delta;
        }
}

And one more thing we should do in this case is to check crop bounds weren't increased after image cropping (bounds.width < canvas.width), otherwise after image will have been saved, and then page will have been reloaded, IndexSizeError will take place again.

P.S. I didn't find similar issue among existing ones, so if such issue had already been closed, I apologise for duplicating.

cstefanache commented 7 years ago

Hello, thank you very much for the issue. Unfortunately I have no IE machine that I can test the change. Is it possible to open a PR that is tested and integrate it as part of the next release?

akliuiko commented 7 years ago

Ok, it's quite specific implementation, but I can try to integrate fix for IndexSizeError. Checking crop bounds to be less than canvas size is a little bit harder to implement - it takes place in my outer component logics. I use option minWithRelativeToResolution and map canvas size when image.width!=image.height to force canvas size to be equal to image size.

Besides, it's quite dificult to debug scripts in the IE/Edge, so I symphathize any programmer, who has to do it.