我可以在使用 ngx-image-cropper 裁剪图像之前更改图像的亮度和对比度吗？

Question

Question - Is there any easy way (ex. CSS) to change the brightness and contrast of an image before sending it to ngx-image-cropper , so that when I call crop() the brightness/contrast persist to the final cropped output image?

Ex. load it into a viewer (ex. img tag), adjust brightness, then load it into the cropper window, adjust the zoom, cropped area, etc, then call crop() on the image to get the final output.

Problem - Nothing I'm trying seems to work to change the brightness of the final cropped image output and I'm aware the ngx-image-cropper library doesn't allow me to adjust brightness or contrast. I can only zoom and rotate. I'm also aware there are other libraries to do this, I'm stuck on finding one for Angular that is easy free and simple to use.

I have created and set up a Stackblitz demo here to show the process I use to get and crop an image.

Maybe I need to rethink the way I'm working with and editing an image, while using the cropper library?

Here is the code to demo the process

 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" />

Answer 1

ngx-image-cropper only supports cropping related features. It doesn't come with other features such as brightness or contrast adjustment.

One of the popular paid library is pintura which supports Angular out of the box.

If you are only interested in open-source library, then this site has a good list: https://medevel.com/16-os-photo-image-editors/