Блог

Я использую react-cropper версии 2.0.0. Я действительно не понимаю проблему. Это происходит в методе zoomTo cropperjs. Я инициализировал экземпляр cropper в bootstrap modal. Я вижу, что cropper инициализирован правильно, а также успешно отображает canvasData, но он по-прежнему выдает некоторую ошибку при разборе функции zoomTo в cropperjs. Не удается получить 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;