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

【问题标题】：Setting minimum image resolution in react-cropper在 react-cropper 中设置最小图像分辨率
【发布时间】：2018-05-14 05:04:55
【问题描述】：

我正在使用 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}
            />

【问题讨论】：

标签： reactjs cropperjs

【解决方案1】：

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

【讨论】：