1

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

1 回答 1

2
           <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;
    };
于 2018-05-23T12:15:31.363 回答