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

Question

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

问题是 - 我无法初始化 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}
      />
    );
  }
}

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

Unable to create instance to Cropperjs using react-cropper

crop

reactjs

cropperjs