IOS (Chrome, Safari) crop issue

[nikolasp]

Hi! Recently I've tried image cropper on iPad (Chrome and Safari) and it doesn't work. Always returns initial crop area and not selected. However, this works really fine on a desktop... Do you know what is a problem?

[shaibansid]

@cstefanache thanks for this awesome cropper. I'm also facing same issue on iPhone (Safari) as it always returns initial crop area on drag(crop).

[shaibansid]

@nikolasp @cstefanache i want to correct my above comment as everything is superb, Current behaviour is that it return selected crop image on drag & touch(click) not only by drag(as on desktop). So my question is this is final behaviour(drag & touch) or it should return cropped image on drag only?

[mbackonja]

Hi! I'm also facing same problem. Problem is with small resolutions, not just with iPad. When You toggle device toolbar in chrome on PC and select any mobile phone resolution, You will also face same problem.

@cstefanache thanks in advance!

[cstefanache]

will start working on it after 14th On Fri, 9 Dec 2016 at 21:39, mbackonja notifications@github.com wrote:

Hi! I'm also facing same problem. Problem is with small resolutions, not just with iPad. When You toggle device toolbar in chrome on PC and select any mobile phone resolution, You will also face same problem.

@cstefanache https://github.com/cstefanache thanks in advance!

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/cstefanache/angular2-img-cropper/issues/92#issuecomment-266015769, or mute the thread https://github.com/notifications/unsubscribe-auth/AC7c4TDEtUEpKe5LxCsuREjjO0AxaotFks5rGVn4gaJpZM4KpkgO .

[LeiwenL]

Any news on the issue ? :disappointed:

[cstefanache]

Can you please test with this plnkr: https://embed.plnkr.co/VFwGvAO6MhV06IDTLk5W/

I added the binding to data size and it seems to work - can you validate that this addition might solve the problem?

[LeiwenL]

It works like a charm on chrome via plnkr ! Thanks :smile: But in my app, I got sometimes an empty canvas... when I touch on the canvas, the image appears :disappointed:

[cstefanache]

I just released a 0.7.7 - added check for nativeWidth && nativeHeight of the image. Sometimes the file uploader notices the component that the image is loaded even though it is not. I added a timer that checks every 10ms if the native sizes are calculated correctly.

Can you please check on IPad? I tested with mine (using plnkr) and works fine.

[LeiwenL]

Great job ! It works fine on my Iphone but like I said I need to touch the canvas to make the image appears. I use ionic 2 ...

[cstefanache]

I will have to do some more tests -> I got an Iphone and I will try to fix it asap

[ojacquemart]

Any news on that issue? Do you need help?

[cstefanache]

I cannot reproduce it neither on IPad or IPhone 6s

[ojacquemart]

For your information, we still have issues on iphone 5.

I am waiting for a device to reproduce the issue and I will try to debug it.

[cstefanache]

Can you please test with 0.8.2 release?

[FredrikHa]

Any updates here? Having issues on my iPhone as well

[rrotaru]

@cstefanache The issue appears to happen with large photos rather than small photos. I believe this is because on mobile it takes longer for the actual image object to load with high resolution photos. What you're missing in your ImageCropperComponent.fileChangeListener is an onload event listener for the image object itself before calling that_1.setImage(image_1)

The below code resolves the issue for me, and the image loads after a few seconds.

ImageCropperComponent.prototype.fileChangeListener = function ($event) {
        if ($event.target.files.length === 0)
            return;
        var file = $event.target.files[0];
        if (this.settings.allowedFilesRegex.test(file.name)) {
            var image_1 = new Image();
            var fileReader = new FileReader();
            var that_1 = this;
            fileReader.addEventListener('loadend', function (loadEvent) {
                image_1.addEventListener('load', function() {  // Wait for image to load before calling setImage
                  that_1.setImage(image_1);
                });
                image_1.src = loadEvent.target.result;
            });
            fileReader.readAsDataURL(file);
        }
    };

I still notice a lot of input lag afterwards when dragging the cropping rectangle on large images (3000x2000px and higher).

[cstefanache]

thanks @rrotaru - can you please open a PR with your changes? I can do the update but I will be more than happy to have you listed on the contributors page