Wait for source image to be interactable

README.md

@@ -85,7 +85,7 @@ All inputs are optional. Either the `imageChangedEvent` or `imageBase64` should
 | `aspectRatio`          | number    | 1 / 1        | The width / height ratio (e.g. 1 / 1 for a square, 4 / 3, 16 / 9 ...) |
 | `resizeToWidth`        | number    | 0 (disabled) | Cropped image will be resized to this width (in px) |
 | `onlyScaleDown`        | boolean   | false        | When the `resizeWidth` is set, enabling this option will make sure smaller images are not scaled up |
-| `cropper`              | { x1: number, y1: number, x2: number, y2: number } |  | To be able to get the cropper coordinates, you can use this input. Create a new object `{x1: number, y1: number, x2: number, y2: number }` and assign it to this input. Make sure to create a new object each time you wish to overwrite the cropper's position. |
+| `cropper`              | { x1: number, y1: number, x2: number, y2: number } |  | To be able to overwrite the cropper coordinates, you can use this input. Create a new object of type `CropperPosition` and assign it to this input. Make sure to create a new object each time you wish to overwrite the cropper's position and wait for the `cropperReady` event to have fired. |
 | `imageQuality`         | number    | 92           | This only applies when using jpeg or webp as output format. Entering a number between 0 and 100 will determine the quality of the output image. |
 | `autoCrop`             | boolean   | true         | When set to true, the cropper will emit an image each time the position or size of the cropper is changed. When set to false, you can call the crop method yourself (use @ViewChild to get access to the croppers methods). |
 
@@ -96,6 +96,7 @@ All inputs are optional. Either the `imageChangedEvent` or `imageBase64` should
 | **(DEPRECATED)** `imageCroppedBase64` | string            | Emits a Base64 string of the cropped image each time it is cropped |
 | **(DEPRECATED)** `imageCroppedFile`  | File              | Emits the cropped image as a file each time it is cropped |
 | `imageLoaded`           | void              | Emits when the image was loaded into the cropper |
+| `cropperReady`          | void              | Emits when the cropper is ready to be interacted |
 | `startCropImage`        | void              | Emits when the component started cropping the image |
 | `loadImageFailed`       | void              | Emits when a wrong file type was selected (only png, gif and jpg are allowed) |
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-image-cropper",
-  "version": "1.2.5",
+  "version": "1.3.0",
   "description": "An image cropper for Angular",
   "main": "./bundles/ngx-image-cropper.umd.js",
   "module": "./ngx-image-cropper/ngx-image-cropper.es5.js",

src/component/image-cropper.component.ts

@@ -4,7 +4,7 @@ import {
 } from '@angular/core';
 import { DomSanitizer, SafeUrl, SafeStyle } from '@angular/platform-browser';
 import { MoveStart, Dimensions, CropperPosition, ImageCroppedEvent } from '../interfaces';
-import { resetExifOrientation } from '../functions/image.functions';
+import { resetExifOrientation } from '../utils/image.utils';
 
 @Component({
     selector: 'image-cropper',
@@ -17,6 +17,7 @@ export class ImageCropperComponent implements OnChanges {
     private moveStart: MoveStart;
     private maxSize: Dimensions;
     private originalSize: Dimensions;
+    private setImageMaxSizeRetries = 0;
 
     safeImgDataUrl: SafeUrl | string;
     marginLeft: SafeStyle | string = '0px';
@@ -67,6 +68,7 @@ export class ImageCropperComponent implements OnChanges {
     @Output() imageCroppedBase64 = new EventEmitter<string>();
     @Output() imageCroppedFile = new EventEmitter<Blob>();
     @Output() imageLoaded = new EventEmitter<void>();
+    @Output() cropperReady = new EventEmitter<void>();
     @Output() loadImageFailed = new EventEmitter<void>();
 
     constructor(private sanitizer: DomSanitizer,
@@ -76,15 +78,13 @@ export class ImageCropperComponent implements OnChanges {
     }
 
     ngOnChanges(changes: SimpleChanges): void {
-        if (changes['cropper']) {
-            setTimeout(() => {
-                this.setMaxSize();
-                this.checkCropperPosition(false);
-                this.doAutoCrop();
-                this.cd.markForCheck();
-            });
+        if (changes.cropper) {
+            this.setMaxSize();
+            this.checkCropperPosition(false);
+            this.doAutoCrop();
+            this.cd.markForCheck();
         }
-        if (changes['aspectRatio'] && this.imageVisible) {
+        if (changes.aspectRatio && this.imageVisible) {
             this.resetCropperPosition();
         }
     }
@@ -153,11 +153,24 @@ export class ImageCropperComponent implements OnChanges {
     imageLoadedInView(): void {
         if (this.originalImage != null) {
             this.imageLoaded.emit();
+            this.setImageMaxSizeRetries = 0;
+            setTimeout(() => this.checkImageMaxSizeRecursively());
+        }
+    }
+
+    private checkImageMaxSizeRecursively() {
+        if (this.setImageMaxSizeRetries > 40) {
+            this.loadImageFailed.emit();
+        } else if (this.sourceImage && this.sourceImage.nativeElement && this.sourceImage.nativeElement.offsetWidth > 0) {
+            this.setMaxSize();
+            this.resetCropperPosition();
+            this.cropperReady.emit();
+            this.cd.markForCheck();
+        } else {
+            this.setImageMaxSizeRetries++;
             setTimeout(() => {
-                this.setMaxSize();
-                this.resetCropperPosition();
-                this.cd.markForCheck();
-            });
+                this.checkImageMaxSizeRecursively();
+            }, 50);
         }
     }