Altering the CSS brightness and/or contrast of an ngx-image-cropper image before it gets cropped?

Question

Is there a way to adjust the brightness and contrast of the cropper image before I crop it with ngx-image-cropper and have those filters be applied when the image gets cropped?

EDIT 5/1/2024 - I know I can get the base64 image after I crop(), create a canvas and apply CSS filters (it's what I'm currently doing). But I would like to see if there is a way to do it before I crop() or to the image that is being cropped, so as to avoid the labor of creating a new canvas with image after I crop just to alter CSS filter values, which were already done with the "imageCropper.sourceImage" on screen by the user. Here is an example of what I'm doing in the app.

This is for reference

// Called after the user changes a slider on screen to adjust the brightness
changeBrightness(event: any) {
    this.filterApplied = true;
    this.imageCropper.sourceImage.nativeElement.style.filter = 'brightness(' + event.target.value + '%) contrast(' + this.contrast + '%) saturate(' + this.saturate + '%)';
}

// Gets called when the user has visually inspected 
// his image on screen and is ok with it and is 
// ready to save it to the DB.
saveImage() {
    if (this.filterApplied) {
      const filteredImage = this.applyFilter(this.imageCropper.crop('base64').base64);
      this.saveToDb(filteredImage);
    } else {
      this.saveToDb(this.imageCropper.crop('base64').base64);
    }

applyFilter(base64) {
  // code left out for brevity
  // 1. create canvas and modify CSS filters
  // 2. return base64 image
}

Problem - I can adjust the source image (image on screen) brightness (see example above), but when I run crop() the base64 image that gets returned by the cropper doesn't have the brightness altered. I have to go and take the returned image and change the brightness by creating a new canvas and apply filters to a new image, then return that new image. It works but has a laborious process of a new canvas.

What I tried (see my snippet below) with no luck.

1. Altered the imageCropper.sourceImage.nativeElement.style.filter
2. Modified the loadedImage property from private to public and a.) Altered the imageCropper.loadedImage.original.image.style.filter b.) Altered the imageCropper.loadedImage.transformed.image.style.filter

I tried stepping through the libraries code to see what image was being used but got a little lost.

Here is a sample below of how I modify the CSS for the source image and my example on stackblitz code that shows what I'm doing.

@ViewChild("imageCropper") imageCropper: ImageCropperComponent;

crop() {
  this.imageCropper.sourceImage.nativeElement.style.filter = 'brightness(150%) contrast(150%) saturate(150%)';
  // I also tried loadedImage, both original and transformed with no luck
  // this.imageCropper.loadedImage.original.image.style.filter = 'brightness(' + event.target.value + '%) contrast(' + this.contrast + '%) saturate(' + this.saturate + '%)';
  // this.imageCropper.loadedImage.transformed.image.style.filter = 'brightness(' + event.target.value + '%) contrast(' + this.contrast + '%) saturate(' + this.saturate + '%)';
  this.imageCropper.crop();
}