angular - Angular 9 ngx-image-cropper 使用滑块调整裁剪器大小
问题描述
我ngx-image-cropper
在我的项目中使用了一个库。我只想以 16/9 的纵横比裁剪图像,这没关系。我已设置aspectRatio
为 16/9,裁剪器是矩形的。我还实现mat-slider
了,它应该只改变图像裁剪器的宽度和高度,就像它与拖动裁剪器的箭头来缩放它一样。是否有可能将调整裁剪器大小的 mat-slider 事件添加到通过拖动箭头更改裁剪器比例时它是如何工作的?我不想用垫子滑块缩放图像,而只是裁剪器。我在ngx-image-cropper
图书馆搜索过,但没有找到适合我需要的任何东西。谢谢你的帮助!
图书馆链接: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>
解决方案
在我的应用程序中,我只使用以下命令更改和高度:[maintainAspectRatio]="false"
这是我的代码的一小部分:
<image-cropper
[imageChangedEvent]="imageChangedEvent"
[imageURL]="imageUrl"
[transform]="transform"
[maintainAspectRatio]="false"
[aspectRatio]="aspectRatio"
[canvasRotation]="canvasRotation"
(imageCropped)="imageCropped($event)"
></image-cropper>
推荐阅读
- python - 如何有条件地编辑列表中的多个元素?
- phpmyadmin - 如何从 phpmyadmin 登录中删除“欢迎使用 phpMyAdmin”文本
- android - Gradle 同步失败:更新到 Gradle 4.0.0 后找不到方法
- php - 使用多个选择选项编辑选择选项
- azure - Azure 队列触发器函数不选择排队的消息
- python - tkinter 表
- postgresql - 主键值 EF Core
- amazon-web-services - 使用 pysprak 处理结构数据类型
- laravel - 所需的验证在 laravel darkaonline swagger UI 中不起作用
- php - localhost 当前无法处理此请求。HTTP ERROR 500