Unable to Change Wrapper Color to White

[kristinadjuricic]

Hi, I have been attempting to change the color of the wrapper from black to white. Despite my efforts, when I set it to white, I only get a shade of gray. However, if I choose any other color, it appears as expected. Is it possible to have the wrapper in white?

[Norserium]

@kristinadjuricic, actually, you'have changed the cropper background to white.

Why it is still gray? The answer is simple, cause it becomes gray due to stencil's overlay, that used to distinguish the cropped area and the other content.

Take a look at this example:

The background is white, but its parts are white only when they belong to the cropped area, otherwise they become gray.

Let's try to limit the stencil's overlay to image only now.

That's the trouble.

Could you tell me more about your use-case? What is the desired result?

By the way, there is the workaround to make the background white that I've used to make the screenshot above.

[ps-kristina-djuricic]

In my case, I'm using a CustomWrapper that was created in this way to implement a zoom slider: `const CustomWrapper = ({ cropper, children }) => { const state = cropper.getState(); const settings = cropper.getSettings(); const absoluteZoom = getAbsoluteZoom(state, settings);

const onZoom = (value, transitions) => {
    const zoomValue = value > 1 ? 0 : value;

    cropper.zoomImage(getZoomFactor(state, settings, zoomValue), {
        transitions: !!transitions
    });
};

const contentStyle = {
    display: 'flex',
    width: '852px',
    height: '365px',
};

const navigationStyle = {
    display: 'flex',
    alignItems: 'center',
    maxWidth: '400px',
    width: '100%'
};

return (
    <CropperFade visible={state && cropper.isLoaded()}>
        <div style={contentStyle}>{children}</div>
        <div style={navigationStyle}>
            <ZoomControls zoom={absoluteZoom} onZoom={onZoom} />
        </div>
    </CropperFade>
);

};`

The height and width of the content have been added. What I would like to achieve is for the area where there is no image,the area to the left and right of the image, to be white. One of the features I would like to add is that when "solid color" option is selected, the visual effect should be displayed accordingly, the selected color should fill that empty space, but due to this gray overlay, it's not possible to achieve it successfully. However, with the current structure of CustomCropper, it seems to me that it's not possible to achieve this. Is there any workaround or advice for this case?

[Norserium]

@kristinadjuricic, did you try my workaround?

[ps-kristina-djuricic]

I applied your solution/workaround, and it works. We can now close this issue. Thank you for your help :)

[Norserium]

@ps-kristina-djuricic, you are welcome!

[anshul-kai]

Thanks for the workaround @ps-kristina-djuricic. For a library built this well, one shouldn't need a hack to change the default background. The best I was able to achieve was to change the black background to gray by adding the following override.

.advanced-cropper__background-wrapper {
  background: white;
}

Strange that backgroundWrapperClassName="bg-white" doesn't work via props.

Unless I'm mistaken, this probably requires some attention.