Uncaught TypeError：无法读取Cropper.zoomTo中未定义的属性“ width”

问题描述

我正在使用2.0.0版的react-cropper。我不太了解这个问题。它发生在cropperjs zoomTo方法中。我已经在bootstrap modal上初始化了ropper实例。我看到裁剪器已正确初始化，并且还成功显示了canvasData，但是在分析cropperjs中的zoomTo函数时，它仍然会引发一些错误。无法获取canvasData

这是我的反应代码

class CropperModal extends React.Component{

       constructor(){
        super(); 
        this.state={
         
            cropperInstance: '',sourceImage:'',cropperSize: '',}
      
        this.onCropperInit = this.onCropperInit.bind(this);
     
    }        
    UNSAFE_componentwillReceiveProps(newProps){
         let image = new Image();
         image.src = newProps.originalImage;
         const _this = this;
         image.onload = function () {
            
             if (this.width <= this.height) {
                 _this.setState({
                     sourceImage: newProps.originalImage,cropperSize: {
                         height: "100%",width: "auto"
                     },})
             } else {
                 _this.setState({
                     sourceImage: newProps.originalImage,cropperSize: {
                         height: "auto",width: "100%"
                     },})
             }
onCropperInit(cropper) {
        this.setState({
            cropperInstance: cropper    
        })
    
    console.log(cropper)
    }
        render(){
         
            return(
            
                    <Modal show={this.props.showModal} onHide={this.props.hideModal} dialogClassName="ModalSize" onEnter={this.props.onEnter}>
                    <Modal.Header closeButton>
                        Image adjustment
                    </Modal.Header>
                    <Modal.Body className="modalBodyHeight">
                        <Row>
                            <Col lg={6} className="cropperImage">
                               <Cropper  onInitialized={this.onCropperInit} src={this.state.sourceImage} style={{height: this.state.cropperSize.height,width: this.state.cropperSize.width}} aspectRatio="1.4" guides={true}  dragMode="move"  />
                            
                        </Col>
                            <Col lg={3}>
           
                                <div className="imgPreview"> 
                                </div>
                                
                                
                            </Col>
                           
                        </Row>  
                        </Modal.Body>
                   
                    </Modal>
                    
            )
        }
    }

export default CropperModal;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）