I'm using an ngx-image-cropper
library in my project. I would like to crop image only in aspect ratio 16/9, and that's okay. I have set aspectRatio
to 16/9 and cropper is rectangle. I have also implemented mat-slider
, which should change only width and height of image cropper just like it works with dragging arrows of the cropper to scale it. Is it possible, to add to mat-slider event of resizing cropper exactly how it works with changing cropper scale by dragging arrows? I don't want to scale image with mat-slider, but only cropper. I have searched in ngx-image-cropper
library but I have not found anything which will be appropriate for my needs. Thanks for any help!
Link to the library: https://www.npmjs.com/package/ngx-image-cropper
<div class="image-cropper-dimensions">
<image-crop
[imageFile]="data.file"
[cropWidth]="sliderValue"
[aspectRatio]="16 / 9"
[isFileStrip]="true"
[roundCropper]="data.isRoundedCropper"
(onImageCropped)="onImageCropped($event)"
>
</image-crop>
</div>
</div>
<div class="image-edit-container">
<mat-slider
[min]="SLIDER_MIN_VALUE"
[color]="'primary'"
[value]="sliderValue"
[step]="SLIDER_STEP"
(input)="onSliderChange($event)"
>
</mat-slider>
in my application I change only with and height with this command: [maintainAspectRatio]="false"
This is a little part from my code:
<image-cropper [imageChangedEvent]="imageChangedEvent" [imageURL]="imageUrl" [transform]="transform" [maintainAspectRatio]="false" [aspectRatio]="aspectRatio" [canvasRotation]="canvasRotation" (imageCropped)="imageCropped($event)" ></image-cropper>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.