Image filters

[Domepo]

Question

Is there any good way to apply filters (contrast, saturation, brightness, etc.) to the cropped image?

Problem

There is a way to manipulate an image via css, but its not a global change. The preview image for example is not affected

.cropper img{
  filter: brightness(0.1);
}

    <cropper
      class="cropper"
      ref="cropper"
      <!--   it would be cool, to modify the filters directly of the :src"img"-->
      :src="img"
    />

[Norserium]

@Domepo, hello!

There is no a perfect way to do it right now.

You can apply filter to image and preview simultaneously. The example. The limitations are obvious: the number of filters will be limited and you need to apply them to the cropped image separately.

You can change the image itself. It's the most flexible way, but there is the catch. When you change src property the cropper state will be reset. This aspect was discussed in this issue and I offered the workaround there.

I suppose that the regular solution will be available in the next major release on the analogy of react-advanced-cropper method:

cropper.setImage(image);

[Domepo]

Tanks a lot!

[Norserium]

@Domepo, you are welcome. I close this issue, but feel free to reopen it if you encounter any troubles.

[Norserium]

@Domepo, just for your information. I assume that in the next major release it will be implemented in this manner. Any feedback is appreciated.