Comments (5)
@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.
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.
from react-advanced-cropper.
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?
from react-advanced-cropper.
@kristinadjuricic, did you try my workaround?
from react-advanced-cropper.
I applied your solution/workaround, and it works. We can now close this issue. Thank you for your help :)
from react-advanced-cropper.
@ps-kristina-djuricic, you are welcome!
from react-advanced-cropper.
Related Issues (20)
- Applying a transform to the preview only HOT 10
- Preview to Canvas? HOT 4
- How to make stencil to minWidth and minHeight.
- Blinking issue with the image on page loads. HOT 2
- URGENT - Image wrongly sized on Safari HOT 7
- Mouse resizing doesn't work HOT 5
- change the stencilComponent to use an oval instead of a circle or rectangle? HOT 13
- How to set the maximum zoom? HOT 1
- When rotating, the cropper coordinates change and the visible area becomes cropped HOT 1
- How to implement undo redo functionality while editing image? HOT 1
- Reposition Cropper for Progressively Loaded High Resolution Image HOT 1
- Image is not viewed in full size based on the crop HOT 2
- Only in Safari for a Portrait image after cropping when saving it shifts to the left hand side HOT 1
- Image load not taking entire wrapper height HOT 2
- Image reduced in height when taken with camera HOT 1
- Cropper for multiple images HOT 5
- Is it possible to set the stencil coordinates? HOT 3
- Breaking change in 0.19.5 from 0.19.4 (a patch version!) HOT 2
- The file size of the image actually increases by almost 10 times after cropping HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-advanced-cropper.