Search code examples
reactjscropperjs

Setting minimum image resolution in react-cropper


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}
            />

Solution

  •            <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;
        };