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();