I am currently working on developing a basic react component that involves cropping images using react-easy-crop. It seems like the style of the react-easy-crop module can be customized with the style prop, which consists of three objects: containerStyle, mediaStyle, and cropAreaStyle.
Here is the default layout:
https://i.sstatic.net/yjPv9.png
I am aiming to expand the cropArea to cover the full width of its container and adjust the media to fit in by height, eliminating any parts of the original image visible outside the cropArea. However, I am having trouble achieving this as it appears that the cropAreaStyle object does not affect width or height due to being calculated and injected in the module file (even after setting disableAutomaticStylesInjection to true).
import React from 'react'
import ReactDOM from 'react-dom'
import Cropper from 'react-easy-crop'
import './styles.css'
class App extends React.Component {
state = {
imageSrc:
'https://img.huffingtonpost.com/asset/5ab4d4ac2000007d06eb2c56.jpeg?cache=sih0jwle4e&ops=1910_1000',
crop: { x: 0, y: 0 },
zoom: 1,
aspect: 1 / 1,
style: { containerStyle: { position: "absolute", top: "0", width: "calc(100% - 2px)", height: window.innerWidth, overflow: "hidden", border: "1px solid black" },
mediaStyle: { height: "100%", display: "block" },
cropAreaStyle: {position: "absolute", top: "0", border: "1px solid black", width: "100%", height: "100%" }}
}
onCropChange = (crop) => {
this.setState({ crop })
}
onCropComplete = (croppedArea, croppedAreaPixels) => {
console.log(croppedArea, croppedAreaPixels)
}
onZoomChange = (zoom) => {
this.setState({ zoom })
}
render() {
return (
<div className="App">
<div className="crop-container">
<Cropper
image={this.state.imageSrc}
crop={this.state.crop}
zoom={this.state.zoom}
aspect={this.state.aspect}
onCropChange={this.onCropChange}
onCropComplete={this.onCropComplete}
onZoomChange={this.onZoomChange}
style={this.state.style}
disableAutomaticStylesInjection={true}
/>
</div>
</div>
)
}
}
const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)
This is my desired outcome:
https://i.sstatic.net/diZYH.png
The black square represents the cropArea that I am struggling to resize...
I want to maintain the cropArea as a square.
Is there a simple way to achieve this without modifying the module file?
Alternatively, I am open to suggestions involving a different module.
Thank you in advance