Изменение яркости и/или контрастности CSS изображения ngx-image-cropper до его обрезки? ⇐ CSS

[Anonymous]

Есть ли способ отрегулировать яркость и контрастность обрезанного изображения перед его обрезкой с помощью ngx-image-cropper и применить эти фильтры при обрезке изображения?
РЕДАКТИРОВАТЬ 01.05.2024. Я знаю, что смогу получить изображение в формате Base64 после обрезки(), создания холста и применения фильтров CSS (это то, что я сейчас делаю). Но я хотел бы посмотреть, есть ли способ сделать это до того, как я обрежу() или обрезаю изображение, чтобы избежать труда по созданию нового холста с изображением после того, как я обрезаю только для того, чтобы изменить значения CSS-фильтра, которые уже были сделаны пользователем с помощью «imageCropper.sourceImage» на экране. Вот пример того, что я делаю в приложении.
Это для справки
[img]https:// i.sstatic.net/1VLLyG3L.png[/img]



< pre class="snippet-code-js lang-js Prettyprint-override">

Код: Выделить всё

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

Проблема – я могу настроить исходное изображение (изображение на экране) яркость (см. пример выше), но когда я запускаю Crop(), изображение в формате Base64, возвращаемое обрезчиком, не меняет яркость. Мне нужно взять возвращенное изображение, изменить яркость, создав новый холст и применить фильтры к новому изображению, а затем вернуть это новое изображение. Он работает, но требует трудоемкого процесса создания нового холста.
То, что я пробовал (см. мой фрагмент ниже), безуспешно.

• Изменен imageCropper.sourceImage.nativeElement.style.filter.
• Изменено свойство loadingImage с частного на общедоступное и
  а.) Изменен imageCropper.loadedImage.original. image.style.filter
  b.) Изменил imageCropper.loadedImage.transformed.image.style.filter

Я попробовал пройтись по библиотекам код, чтобы увидеть, какое изображение использовалось, но немного потерялось.
Вот пример ниже того, как я изменяю CSS для исходного изображения, и мой пример кода stackblitz, который показывает, что я делаю.

Код: Выделить всё

@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();
}

Подробнее здесь: https://stackoverflow.com/questions/784 ... age-before