组建开发中。。。。

安装

  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,

参数	说明	类型	默认值	备注
src	需要裁剪的图片地址	string	无
initClipWidth	初始裁剪宽度	'auto'	相对图片原始大小
initClipHeight	初始裁剪高度	'auto'	相对图片原始大小
w_h	裁剪的宽高比	16/9	无
visible	控制显隐	boolean	无
onOk	点击确定回调	function(data)）	无
onCancel	点击右上角X回调	function	无
onError	图片加载失败回调	function	无