PCK
PCK

Reputation: 1444

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

Upvotes: 1

Views: 3936

Answers (1)

PCK
PCK

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

Related Questions