在react-cropper中设置最小图像分辨率

时间:2018-05-14 05:04:55

标签: reactjs cropperjs

我正在使用react-cropper插件来调整图像大小。我需要提供最小宽度和高度,低于该宽度和高度无法调整图像大小。最小宽度和高度也必须相对于实际图像大小,而不是根据视口图像大小。

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

1 个答案:

答案 0 :(得分:0)

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