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