Set scaled min and max sizes when aspect ratio is changed - Fixes #443

Mawi137 · Jun 1, 2021 · a538d17 · a538d17
1 parent 5bfd491
commit a538d17
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git a/projects/demo-app/src/app/app.component.html b/projects/demo-app/src/app/app.component.html
@@ -11,6 +11,7 @@
 <br />
 <br />
 <button (click)="toggleContainWithinAspectRatio()">{{containWithinAspectRatio?'Fill Aspect Ratio':'Contain Within Aspect Ratio'}}</button>
+<button (click)="toggleAspectRatio()">Aspect ratio: {{aspectRatio === 4/3 ? '4/3' : '16/9'}}</button>
 <button (click)="resetImage()">Reset image</button>
 <br />
 <br />
@@ -23,7 +24,7 @@
         [imageURL]="imageURL"
         [maintainAspectRatio]="true"
         [containWithinAspectRatio]="containWithinAspectRatio"
-        [aspectRatio]="4 / 3"
+        [aspectRatio]="aspectRatio"
         [resizeToWidth]="128"
         [cropperMinWidth]="128"
         [onlyScaleDown]="true"

diff --git a/projects/demo-app/src/app/app.component.ts b/projects/demo-app/src/app/app.component.ts
@@ -12,6 +12,7 @@ export class AppComponent {
   canvasRotation = 0;
   rotation = 0;
   scale = 1;
+  aspectRatio = 4 / 3;
   showCropper = false;
   containWithinAspectRatio = false;
   transform: ImageTransform = {};
@@ -115,4 +116,8 @@ export class AppComponent {
       rotate: this.rotation
     };
   }
+
+  toggleAspectRatio() {
+    this.aspectRatio = this.aspectRatio === 4 / 3 ? 16 / 9 : 4 / 3;
+  }
 }
diff --git a/projects/ngx-image-cropper/src/lib/component/image-cropper.component.ts b/projects/ngx-image-cropper/src/lib/component/image-cropper.component.ts
@@ -114,17 +114,18 @@ export class ImageCropperComponent implements OnChanges, OnInit {
         .then((res) => this.setLoadedImage(res))
         .catch((err) => this.loadImageError(err));
     }
-    if (changes.cropper) {
+    if (changes.cropper || changes.maintainAspectRatio || changes.aspectRatio) {
       this.setMaxSize();
       this.setCropperScaledMinSize();
       this.setCropperScaledMaxSize();
-      this.checkCropperPosition(false);
-      this.doAutoCrop();
+      if (this.maintainAspectRatio && (changes.maintainAspectRatio || changes.aspectRatio)) {
+        this.resetCropperPosition();
+      } else if (changes.cropper) {
+        this.checkCropperPosition(false);
+        this.doAutoCrop();
+      }
       this.cd.markForCheck();
     }
-    if (changes.aspectRatio && this.imageVisible) {
-      this.resetCropperPosition();
-    }
     if (changes.transform) {
       this.transform = this.transform || {};
       this.setCssTransform();