在裁剪 ngx-image-cropper 图像之前改变 CSS 亮度和/或对比度？

Question

在使用 ngx-image-cropper 裁剪图像之前，有没有办法调整图像的亮度和对比度？

我知道我可以在裁剪后做到这一点，但想看看是否有办法在裁剪前做到这一点。

我可以调整源图像（屏幕上的图像）的亮度和对比度，但是当我

crop()

然后显示裁剪后的图像时，源图像中已更改的CSS不会在裁剪后的图像中使用。

我尝试过（请参阅下面的代码片段），但没有成功。

1. 更改了 imageCropper.sourceImage.nativeElement.style.filter
2. 将loadImage属性从私有修改为公共 a.) 改变了 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();
}

Answer 1

如果您想在裁剪后向裁剪后的图像添加相同的滤镜，您可以执行以下操作：

1-声明您想要的过滤器选项：

  filterImageOptions = 'brightness(150%) contrast(150%) saturate(150%)'

2- 添加对croppedImage 的模板引用：

    <img #corpImage class="logo-image-edit" [src]="croppedImage" />

3- 使用

@ViewChild('corpImage')

:

阅读此参考资料

  @ViewChild("corpImage") public corpImage: ElementRef<HTMLImageElement>;

4- 在函数内部

imageCropped

添加一个setTimeout，然后将filterOptions添加到croppedImage：

 imageCropped(event: ImageCroppedEvent) {
    this.croppedImage = event.base64;
    setTimeout(() =>{
      this.corpImage.nativeElement.style.filter = this.filterImageOptions;

    },0)
  }