无法使用react-cropper为Cropperjs创建实例

Question

我研究了Github上的react-cropper文档，并尝试应用它。

问题是-我无法初始化裁剪实例。根据文档，我们必须使用onInitialized方法。我这么做了，但我不能启动它。

我应该假设它应该在什么时候被触发-当一个组件被挂载的时候，或者当我向它添加镜像的时候？文档非常模糊。下面是我的代码。似乎onCropperInit函数从未被触发过。

import React from 'react';
import Cropper from 'react-cropper';

export default class Demo extends React.Component{
    
    constructor(){
        super();
        this.state={
            image: "#"
        }
        this._crop = this._crop.bind(this);
        this.onCropperInit = this.onCropperInit.bind(this);
        this.onChange = this.onChange.bind(this)
    }
    
    
 onChange(e) {
     
        e.preventDefault();
        let files;
    
            files = e.target.files;
        const reader = new FileReader();
  
        reader.onload = () => {
            this.setState({
            image: reader.result
            })
        };
        reader.readAsDataURL(files[0]);
    };
    _crop(){
  
    }


onCropperInit(cropper){
console.log("cropper")
    this.cropper = cropper;
}

render(){
    return (
        <div>
         <input type="file" onChange={this.onChange} />
    
        <Cropper src={this.state.image} style={{height:"100vh",width: "90vw"}} aspectRatio={1067/600} guides={true} crop={this._crop} onInitialized={this.onCropperInit} dragMode="move"/>
    </div>
            )
}
}

Answer 1

你是对的。github文档中说要使用onInitialized，但它似乎不起作用。

至少现在您可以使用ref来获取裁剪实例，如下所示：

const cropper = React.createRef(null);

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this._crop.bind(this);
  }

  _crop() {
    console.warn(cropper.current.cropper.getCroppedCanvas());
  }

  render() {
    return (
      <Cropper
        src="http://fengyuanchen.github.io/cropper/images/picture.jpg"
        style={{ height: 400, width: '100%' }}
        initialAspectRatio={16 / 9}
        guides={false}
        crop={this._crop}
        ref={cropper}
      />
    );
  }
}