React-Cropper实现图片裁剪

React-Cropper实现图片裁剪

在使用时遇到的问题

1.this.cropper.getCroppedCanvas is not a function

根据官网信息

1. ~~Support for ref has been removed.~~Use the onInitialized method to get the cropper instance. Added back ref support in 2.1.0.

可知下面这种写法不在支持，会导致this.refs.cropper.getCroppedCanvas().toDataURL()中会出现this.cropper.getCroppedCanvas is not a function

<Cropper
              src={
   this.state.cropSrc} 
              // 图片路径，即是base64的值，在Upload上传的时候获取到的
              style={
   {
    height: 400 }}
              preview='.cropper-preview'
              className='company-logo-cropper'
              viewMode={
   1} // 定义cropper的视图模式
              zoomable// 是否允许放大图像
              aspectRatio={
   1} // image的纵横比
              guides // 显示在裁剪框上方的虚线
              background // 是否显示背景的马赛克
              rotatable={
   false}
              ref='cropper'//在官方更新之后ref不在支持
            /> 

应按照官网描述写为

 <Cropper
          src={
   this.state.cropSrc} 
          // 图片路径，即是base64的值，在Upload上传的时候获取到的
          style={
   {
    height: 400 }}
          preview='.cropper-preview'
          className='company-logo-cropper'
          viewMode={
   1}