react-image-clipper v0.4.4

组建开发中。。。。

安装

  npm i react-image-clipper --save-dev

#使用

  import ImageClipper from 'react-image-clipper';

  class App extends React.Component {
    state: {visible: false}

    showImageClipper = () => {
      this.setState({
        visible: true,
        src:'http://zyp-farm-2.oss-ap-southeast-1.aliyuncs.com/data/farm/head/1533032455399.jpg',
      })
    }

    handleImageClipperOk = (data) => {
      console.log(data);
      this.setState({
        visible: false,
      })
    }

    handleImageClipperCancel = () => {
      this.setState({
        visible: false,
      })
    }

    render() {
      return (
        <div>
          <button onClick={this.showImageClipper}>showImageClipper</button>
          <ImageClipper
          visible={this.state.visible}
          onOk={this.handleImageClipperOk}
          onCancel={this.handleImageClipperCancel}
          onError={() => {
            console.log('图片加载失败')
          }}
          src={'xxxxx.jpg'}
          />
        </div>
      )
    }
  }

#注意

src: PropTypes.string.isRequired,

initClipWidth: PropTypes.number,

initClipHeight: PropTypes.number,

onCancel: PropTypes.func.isRequired,

onOk: PropTypes.func.isRequired,

onError: PropTypes.func,