Can't remove/change white background when new image is loaded

[Shuky]

Fantastic library, but the cropper has a stall when switching between images.
Even if the fade in animation is removed, once a new image is uploaded the canvas is immediately cleared and a white background appears when loading a new image.

I'm currently adding effects to the existing image (contrast, saturation, etc.) and would love to be able to make the transition smoother when I switch the cropper src image.

This can be solved be either:

1. direct access to the canvas for manipulation and repaint
2. keeping the old image rendered on the canvas until the new one is painted.

[Norserium]

@Shuky, hello! Are you aware, that the image changing will reset the coordinates and visible area? I assume that it's the next issue, that you will encounter.

[Shuky]

@Norserium hi!
Actually already took care of that by saving to a tmp and updating the cropper on the ready event.

For now I actually hacked a version
Where I manipulate the sourceCanvas field and made a modified version of the “onChangeImage” function that doesn’t set imageLoaded to false.

seems like it did the trick

[Norserium]

Just for curiosity, does the setting of transitionTime to 0 fix your issue? Don't even-even use it in production, because I will remove this property soon, but it will be helpful if you try it now.

[trpx]

Hi folks, I am encountering the same issue (my use-case is the same - I am changing saturation etc - i.e. implementing a more feature-complete image editor based on this great component).
And setting transitionTime to 0 doesn't fix this completely, there is still a noticeable transition to white and back (although faster).

The white background issue goes away if you set transition: none styles for background and foreground (as far as I can tell after a quick investigation, there is no idiomatic way to do this for now, so external css is one option), but the image keeps disappearing during reloading even if you remove the whitening transition with css and transitionTime=0.
It would be so great to be able to change the underlying image from the outside of the component without such side-effects.

What would be the best way to apply such alterations to the image without resetting the coordinates/visible area etc?
For now I am considering hacking into the source to implement a hook for arbitrary manipulations. Is there any pixel-manipulating function (within the component) which can be used for inspiration? Or is there a better way?

And thank you for this awesome library, it is the best of the kind for sure, great work.

[Norserium]

@trpx, hello!

Is there any pixel-manipulating function (within the component) which can be used for inspiration?

What do you mean by "pixel-manipulating function"?

[Norserium]

@trpx, @Shuky, I agree that the swapping image procedure should be changed, because it's obviously too rigid now. You can't affect transitions. You can't preserve coordinates, visible area or image transforms. I do agree, but I'm not sure that I have spare time to redesign this complicated aspect of the library right now.

It's the bad news. But I have good news at last. There is the nice workaround that can be used to smoothly change image without any side effects. Take a look.

[bgomes90]

same problem here... any solution?

[Norserium]

@bgomes90, there is the workaround only now.

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);

[bgomes90]

@bgomes90, there is the workaround only now.

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);

this workaround doesnt work =/
when load an png without background, the cropper set black background (try to do that on workaround, and u'll see)

[Norserium]

@bgomes90, then it's not the issue at all, especially, not this issue. Just change the cropper and stencil background. Look at the example.

[bgomes90]

@Norserium it work when load, but not when crop

take a look

[Norserium]

@bgomes90, if you need to preserve the transparency just set the image/png during the transformation to DataURL or Blob. The example.

If it doesn't fit to you, you can set the canvas fill color (example).

[Norserium]

I'm currently adding effects to the existing image (contrast, saturation, etc.) and would love to be able to make the transition smoother when I switch the cropper src image.

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