问题
-有什么简单的方法(例如CSS)可以在将图像发送到之前更改图像的亮度和对比度吗
ngx-image-cropper
,这样当我调用crop()时,亮度/对比度会持续到最终裁剪的输出图像?
例如,将其加载到查看器中(例如img标签),调整亮度,然后将其加载至cropper窗口,调整缩放、裁剪区域等,然后对图像调用crop()以获得最终输出。
问题
-我所尝试的似乎都无法改变最终裁剪图像输出的亮度,我知道ngx图像裁剪器库不允许我调整亮度或对比度。我只能缩放和旋转。我也知道还有其他库可以做到这一点,我一直在为Angular寻找一个简单、免费、易于使用的库。
我创建并设置了
Stackblitz demo here
以显示我用于获取和裁剪图像的过程。
也许我需要重新思考在使用cropper库的同时处理和编辑图像的方式?
以下是演示该过程的代码
export class AppComponent {
@ViewChild(ImageCropperComponent) imageCropper: ImageCropperComponent;
name = 'Angular';
imageChangedEvent: any = '';
croppedImage: any = '';
fileChangeEvent(event: any): void {
this.imageChangedEvent = event;
}
imageCropped(event: ImageCroppedEvent) {
// this.croppedImage = event.base64;
}
load() {
const croppedImageEvent = this.imageCropper.crop();
this.croppedImage = croppedImageEvent.base64;
}
imageLoaded() {
// show cropper
}
cropperReady() {
// cropper ready
}
loadImageFailed() {
// show message
}
}
<input type="file" (change)="fileChangeEvent($event)" />
<image-cropper
[imageChangedEvent]="imageChangedEvent"
[maintainAspectRatio]="true"
[aspectRatio]="3 / 2"
[resizeToWidth]="300"
format="png"
(imageCropped)="imageCropped($event)"
(imageLoaded)="imageLoaded()"
(cropperReady)="cropperReady()"
(loadImageFailed)="loadImageFailed()"
></image-cropper>
<div style="padding-bottom: 1rem">
<input type="button" value="Load cropped image" (click)="load()" />
</div>
<img [src]="croppedImage" />
