Reputation: 1444
I am using react-cropper plugin for resizing the images. I need to provide minimum width and height below which the image cannot be resized. Also minimum width and height must be relative to the actual image size and not according to the viewport image size.
<Cropper
style={{
height: 422,
width: "90%",
margin: "0 auto",
marginTop: 25
}}
preview=".img-preview"
guides={false}
aspectRatio={16 / 9}
src={this.state.imageSrc}
ref="cropper"
viewMode={1}
className={classes.CropperCustomize}
zoomable={false}
/>
Upvotes: 1
Views: 3936
Reputation: 1444
<Cropper
style={{
height: 422,
width: "90%",
margin: "0 auto",
marginTop: 25
}}
crop={this.crop}
draggable={false}
preview=".img-preview"
guides={false}
aspectRatio={16 / 9}
src={this.state.imageSrc}
ref="cropper"
viewMode={1}
className={classes.CropperCustomize}
zoomable={false}
/>
crop = e => {
if (
e.detail.width < this.props.cropWidth ||
e.detail.height < this.props.cropHeight
) {
this.refs.cropper.cropper.setData(
Object.assign({}, e.detail, {
width:
e.detail.width < this.props.cropWidth
? this.props.cropWidth
: e.detail.width,
height:
e.detail.height < this.props.cropHeight
? this.props.cropHeight
: e.detail.height
})
);
}
return;
};
Upvotes: 2