search

cstefanache / angular2-img-cropper

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

Cropper lags on high-resolution images #186

Closed mmargalo closed 7 years ago

mmargalo commented 7 years ago

Hi.

The cropper's been working great so far, but when I use it on portrait images that have a resolution of at least 2000px, it would lag and eventually cause the page to crash. It happens whenever I keep dragging and/or resizing the cropper. This is one of my test images. IMAGE

If it's any help, I tried resizing the canvas, and the cropper eventually responded after minutes of waiting.

In case you need them, here are my settings...

this.cropperHeroSettings.width = 400; this.cropperHeroSettings.height = 400; this.cropperHeroSettings.minWidth = 200; this.cropperHeroSettings.minHeight = 200; this.cropperHeroSettings.rounded = false; this.cropperHeroSettings.keepAspect = false; this.cropperHeroSettings.noFileInput = true; this.cropperHeroSettings.preserveSize = true; this.cropperHeroSettings.minWithRelativeToResolution = true; this.cropperHeroSettings.responsive = true;

cstefanache commented 7 years ago

I'll have to look into large images issue - this is started to be a big problem.

rrotaru commented 7 years ago

I had the same issue with large images. I believe it's due to the same issue mentioned in #36. I will see if I can find time to help with a solution, but my suggestion would be adding an "onTheFly" flag to cropperSettings that defaults to true (the current behavior) and false disables getCroppedImage() everywhere it is called internally. (Components that need the image could call cropper.getCroppedImage() only when they actually need it.).

rrotaru commented 7 years ago

After some more testing, this seems to exclusively happen when also setting preserveSize = true (which makes sense, the size of the original image doesn't affect performance, only the size of the cropped image we are creating over and over again).

Maybe the fix is to suggest keeping preserveSize = false when working with large images and allowing users to pass a parameter to cropper.getCroppedImage() and manually call it if they want the original resolution cropped image? (That way it doesn't get called on every resize.)

cstefanache commented 7 years ago

Fixed with #191