diff --git a/projects/demo-app/src/app/app.component.html b/projects/demo-app/src/app/app.component.html
index 3a37cac..41c7c95 100644
--- a/projects/demo-app/src/app/app.component.html
+++ b/projects/demo-app/src/app/app.component.html
@@ -11,6 +11,7 @@
+
@@ -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
index c7b1ca7..04e54c9 100644
--- 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
index d546332..281b83a 100644
--- 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();