# ImageCropper 头像照片裁切

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/image-cropper/freepass)
- 平台：PC
- 维护者：屈正巍
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/sjl/zpsz/
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[ImageCropper]

## 代码演示

### 头像裁切（老）

内部图片更新与upload同步更新，真正的上传在onConfirm中根据cropUploadParams的系列参数进行上传

```jsx
import React from 'react'
import { ImageCropper, UploadData, utils } from '@weapp/ui'
import imgSrc from "../../../../assets/images/dKbkpPXKfvZzWCM.png"
const { getBase64FileSize } = utils

interface StateType {
  src: string
}

export default class ImageCropperDemo extends React.Component<any, StateType> {
  cropper: any = null
  constructor(props: any) {
    super(props)
    this.state = {
      src: imgSrc,
    }
  }

  onChange = (src: string) => this.setState({ src })
  onConfirm = (img: string, cropData?: any, photo?: string, photoData?: any) => {
    console.info('img', img)
    console.info('裁切img大小', `${getBase64FileSize(img)}KB`)
    console.info('cropData', cropData)
    console.info('photo', photo)
    console.info('photoData', photoData)
  }

  render() {
    const { src } = this.state
    return (
      <div>
        <h2>弹窗模式</h2>
        <ImageCropper
         
          src={src}
          onChange={this.onChange}
          uploadParams={{
            // url: '/api/hrm/profile/upload',
            // uploadParams: {
            //   type: 'test',
            //   module: 'document',
            // }
            uploadUrl: '/api/file/module/upload',//'/api/hrm/profile/upload',
            uploadParams: { size: 10, module: 'hrm' },
            limitType: 'jpg,png,jpeg,gif,bmp',
            maxSize: 10,
          }}
          onConfirm={this.onConfirm}
        />
        <br />
      </div>
    )
  }
}
```

### 头像裁切（新）

内部图片更新只有在upload上传成功后才会更新，可以关闭isCropAutoUpload参数，只做一次上传

```jsx
import React from 'react'
import { ImageCropper, UploadData, utils } from '@weapp/ui'
import imgSrc from "../../../../assets/images/dKbkpPXKfvZzWCM.png"
const { getBase64FileSize } = utils

interface StateType {
  src: string
}

export default class ImageCropperDemo extends React.Component<any, StateType> {
  cropper: any = null
  constructor(props: any) {
    super(props)
    this.state = {
      src: imgSrc,
    }
  }

  onChange = (src: string) => this.setState({ src })
  onConfirm = (img: string, cropData?: any, photo?: string, photoData?: any) => {
    console.info('img', img)
    console.info('裁切img大小', `${getBase64FileSize(img)}KB`)
    console.info('cropData', cropData)
    console.info('photo', photo)
    console.info('photoData', photoData)
  }

  render() {
    const { src } = this.state
    return (
      <div>
        <h2>弹窗模式</h2>
        <ImageCropper
         
          src={src}
          onChange={this.onChange}
          uploadType={'async'}
          uploadParams={{
            // url: '/api/hrm/profile/upload',
            // uploadParams: {
            //   type: 'test',
            //   module: 'document',
            // }
            uploadUrl: '/api/file/module/upload',//'/api/hrm/profile/upload',
            uploadParams: { size: 10, module: 'hrm' },
            limitType: 'jpg,png,jpeg,gif,bmp',
            maxSize: 10,
          }}
          onConfirm={this.onConfirm}
        />
        <br />
      </div>
    )
  }
}
```

### 头像裁切页面模式（老）

内部图片更新与upload同步更新，真正的上传在onConfirm中根据cropUploadParams的系列参数进行上传

```jsx
import React from 'react'
import { ImageCropper, Button, Icon, Title, UploadData, utils } from '@weapp/ui'
import imgSrc from "../../../../assets/images/dKbkpPXKfvZzWCM.png"
const { getBase64FileSize } = utils

interface StateType {
  src: string
}
export default class ImageCropperDemo extends React.Component<any, StateType> {
  cropper: any = null
  constructor(props: any) {
    super(props)
    this.state = {
      src: imgSrc,
    }
  }

  onChange = (src: string) => this.setState({ src })
  onSuccess = (uploadData: any, response?: any) => {
    console.info('uploadData', uploadData)
    console.info('response', response)
  }
  onError = (uploadData: any, response?: any) => {
    console.info('uploadData', uploadData)
    console.info('response', response)
  }
  onConfirm = (img: string, cropData?: any, photo?: string, photoData?: any) => {
    console.info('img', img)
    console.info('裁切img大小', `${getBase64FileSize(img)}KB`)
    console.info('cropData', cropData)
    console.info('photo', photo)
    console.info('photoData', photoData)
  }
  onDelete = (success: Function) => console.info('deleteSuccess', success)
  onScaleLarge = () => console.info('onScaleLarge')
  onScaleSmall = () => console.info('onScaleSmall')
  onRotate = () => console.info('onRotate')
  clickOnTitle = () => console.info(this.cropper?.getCroppedCanvas()?.toDataURL('image/jpeg'))
  getCropper = (type: string, value: any) => {
    // console.info(type, value)
    /**
     * type: cropper | file
     *
     * cropper 画板对象
     * file 文件对象
     */
    if (type === 'cropper') {
      this.cropper = value
    }
  }
  changeSrc = () => this.setState({ src: imgSrc, })

  render() {
    const { src } = this.state
    return (
      <div>
        <h2>页面模式</h2>
        <Button
         
          onClick={this.changeSrc}
        >
          点击改变图片src
        </Button>
        <Title
         
          title={'照片编辑'}
          buttons={[
            <Button
              onClick={this.clickOnTitle}
             
              key="a"
            >
              确定
            </Button>,
          ]}
        />
        <ImageCropper
         
          getCropper={this.getCropper}
          src={src}
          onChange={this.onChange}
          noDialog
          showSettingBtn
          uploadParams={{
            // url: '/api/hrm/profile/upload',
            // uploadParams: {
            //   type: 'test',
            //   module: 'document',
            // }
            uploadUrl: '/api/file/module/upload',//'/api/hrm/profile/upload',
            uploadParams: { size: 10, module: 'hrm' },
            limitType: 'jpg,png,jpeg,gif,bmp',
            maxSize: 10,
            onSuccess: this.onSuccess,
            onerror: this.onError
          }}
          preview={'preview'}
          emptyShow={
            <Icon
             
              name="Icon-personnel02"
              size="xs"
              style={{
                width: '150px',
                height: '150px',
                color: '#D7D7D7',
                backgroundColor: '#f7f7f7',
              }}
            />
          }
          onConfirm={this.onConfirm}
          onDelete={this.onDelete}
          onScaleLarge={this.onScaleLarge}
          onScaleSmall={this.onScaleSmall}
          onRotate={this.onRotate}
        />
      </div>
    )
  }
}
```

### 头像裁切页面模式（新）

内部图片更新只有在upload上传成功后才会更新，可以关闭isCropAutoUpload参数，只做一次上传

```jsx
import React from 'react'
import { ImageCropper, Button, Icon, Title, UploadData, utils } from '@weapp/ui'
import imgSrc from "../../../../assets/images/dKbkpPXKfvZzWCM.png"
const { getBase64FileSize } = utils

interface StateType {
  src: string
}
export default class ImageCropperDemo extends React.Component<any, StateType> {
  cropper: any = null
  constructor(props: any) {
    super(props)
    this.state = {
      src: imgSrc,
    }
  }

  onChange = (src: string) => this.setState({ src })
  onSuccess = (uploadData: any, response?: any) => {
    console.info('uploadData', uploadData)
    console.info('response', response)
  }
  onError = (uploadData: any, response?: any) => {
    console.info('uploadData', uploadData)
    console.info('response', response)
  }
  onConfirm = (img: string, cropData?: any, photo?: string, photoData?: any) => {
    console.info('img', img)
    console.info('裁切img大小', `${getBase64FileSize(img)}KB`)
    console.info('cropData', cropData)
    console.info('photo', photo)
    console.info('photoData', photoData)
  }
  onDelete = (success: Function) => console.info('deleteSuccess', success)
  onScaleLarge = () => console.info('onScaleLarge')
  onScaleSmall = () => console.info('onScaleSmall')
  onRotate = () => console.info('onRotate')
  clickOnTitle = () => console.info(this.cropper?.getCroppedCanvas()?.toDataURL('image/jpeg'))
  getCropper = (type: string, value: any) => {
    // console.info(type, value)
    /**
     * type: cropper | file
     *
     * cropper 画板对象
     * file 文件对象
     */
    if (type === 'cropper') {
      this.cropper = value
    }
  }
  changeSrc = () => this.setState({ src: imgSrc, })

  render() {
    const { src } = this.state
    return (
      <div>
        <h2>页面模式</h2>
        <Button
         
          onClick={this.changeSrc}
        >
          点击改变图片src
        </Button>
        <Title
         
          title={'照片编辑'}
          buttons={[
            <Button
              onClick={this.clickOnTitle}
             
              key="a"
            >
              确定
            </Button>,
          ]}
        />
        <ImageCropper
         
          getCropper={this.getCropper}
          src={src}
          onChange={this.onChange}
          noDialog
          showSettingBtn
          uploadType={'async'}
          uploadParams={{
            // url: '/api/hrm/profile/upload',
            // uploadParams: {
            //   type: 'test',
            //   module: 'document',
            // }
            uploadUrl: '/api/file/module/upload',//'/api/hrm/profile/upload',
            uploadParams: { size: 10, module: 'hrm' },
            limitType: 'jpg,png,jpeg,gif,bmp',
            maxSize: 10,
            onSuccess: this.onSuccess,
            onerror: this.onError
          }}
          preview={'preview'}
          emptyShow={
            <Icon
             
              name="Icon-personnel02"
              size="xs"
              style={{
                width: '150px',
                height: '150px',
                color: '#D7D7D7',
                backgroundColor: '#f7f7f7',
              }}
            />
          }
          onConfirm={this.onConfirm}
          onDelete={this.onDelete}
          onScaleLarge={this.onScaleLarge}
          onScaleSmall={this.onScaleSmall}
          onRotate={this.onRotate}
        />
      </div>
    )
  }
}
```

### 自定义渲染

自定义渲染打开方式，以及打开后的弹窗展示样式

```jsx
import React from 'react'
import { Icon, ImageCropper, Button, UploadData, utils } from '@weapp/ui'
const { getBase64FileSize } = utils

interface StateType {
  visible: boolean
}

export default class ImageCropperDemo extends React.Component<any, StateType> {
  cropper: any = null

  constructor(props: any) {
    super(props)
    this.state = {
      visible: false,
    }
  }

  onClick = () => this.setState({ visible: true })
  onChange = (src: string) => console.info('onChange', src)
  onConfirm = (img: string, cropData?: any, photo?: string, photoData?: any) => {
    console.info('img', img)
    console.info('裁切img大小', `${getBase64FileSize(img)}KB`)
    console.info('cropData', cropData)
    console.info('photo', photo)
    console.info('photoData', photoData)
  }

  render() {
    return (
      <div>
        <h2>自定义渲染打开方式</h2>
        <ImageCropper
         
          visible={this.state.visible}
          onChange={this.onChange}
          cropperText={'自定义裁剪区头部文案'}
          previewText={'自定义预览区头部文案'}
          previewStyle={{
            border: '1px solid red',
            width: 200,
            height: 200,
            borderRadius: 0,
          }}
          cropperStyle={{
            border: '1px solid blue',
            width: 250,
            height: 250,
          }}
          emptyShow={
            <Icon
             
              name={'Icon-empty-file'}
              style={{
                width: '100%',
                height: '100%',
                display: 'block',
              }}
            />
          }
          onConfirm={this.onConfirm}
          aspectRatio={1}
          dialogProps={{
            width: 600,
          }}
          uploadParams={{
            uploadUrl: '/api/file/module/upload',//'/api/hrm/profile/upload',
            uploadParams: { size: 10, module: 'hrm' },
            limitType: 'jpg,png,jpeg,gif,bmp',
            maxSize: 10,
          }}
        >
          <Button onClick={this.onClick}>Click Me 打开图片设置</Button>
        </ImageCropper>
      </div>
    )
  }
}
```

### 头像照片裁切

可同时裁切头像与照片

```jsx
import React from 'react'
import { ImageCropper, Icon, Select, utils } from '@weapp/ui'
import imgSrc from "../../../../assets/images/dKbkpPXKfvZzWCM.png"
const { getBase64FileSize } = utils

const options = [
  { id: 'png', content: 'png', },
  { id: 'jpeg', content: 'jpeg' },
  { id: 'webp', content: 'webp' },
];

interface StateType {
  src: string
  imgSrc: string
  selectValue: 'png' | 'jpeg' | 'webp'
}

export default class ImageCropperDemo extends React.Component<any, StateType> {
  cropper: any = null
  constructor(props: any) {
    super(props)
    this.state = {
      src: imgSrc,
      imgSrc: '',
      selectValue: 'webp'
    }
  }

  onChange = (src: string) => this.setState({ src })
  onConfirm = (img: string, cropData?: any, photo?: string, photoData?: any) => {
    console.info('img', img)
    console.info('裁切img大小', `${getBase64FileSize(img)}KB`)
    console.info('cropData', cropData)
    console.info('photo', photo)
    console.info('photoData', photoData)
    this.setState({ imgSrc: img })
  }
  onSelectChange = (value: any) => {
    console.log('onSelectChange-value', value)
    this.setState({ selectValue: value })
  }

  render() {
    const { src, imgSrc, selectValue } = this.state
    return (
      <div>
        <h2>弹窗模式</h2>
        <ImageCropper
         
          type={'photo'}
          // src={src}
          onChange={this.onChange}
          uploadParams={{
            uploadUrl: '/api/file/module/upload',//'/api/hrm/profile/upload',
            uploadParams: { size: 10, module: 'hrm' },
            limitType: 'jpg,png,jpeg,gif,bmp',
            maxSize: 10,
          }}
          emptyShow={
            <Icon
             
              name={'Icon-empty-file'}
              style={{
                width: '100%',
                height: '100%',
                display: 'block',
              }}
            ></Icon>
          }
          onConfirm={this.onConfirm}
          base64Type={selectValue}
        />
        <p>裁切格式：</p>
        <Select
          data={options}
          value={selectValue}
          onChange={this.onSelectChange}
        />
        <br />
        <p>裁切后图片</p>
        <img src={imgSrc} style={{ width: 500, height: 500 }}></img>
        <br />
      </div>
    )
  }
}
```

### 头像照片裁切页面模式

头像照片裁切页面模式

```jsx
import React from 'react'
import { ImageCropper, Button, Icon, Title, UploadData, utils } from '@weapp/ui'
import imgSrc from "../../../../assets/images/dKbkpPXKfvZzWCM.png"
const { getBase64FileSize } = utils

interface StateType {
  src: string
}
export default class ImageCropperDemo extends React.Component<any, StateType> {
  cropper: any = null
  constructor(props: any) {
    super(props)
    this.state = {
      src: imgSrc,
      // src: ''
    }
  }

  onChange = (src: string) => this.setState({ src })
  onSuccess = (uploadData: any, response?: any) => {
    console.info('uploadData', uploadData)
    console.info('response', response)
  }
  onError = (uploadData: any, response?: any) => {
    console.info('uploadData', uploadData)
    console.info('response', response)
  }
  onConfirm = (img: string, cropData?: any, photo?: string, photoData?: any) => {
    console.info('img', img)
    console.info('裁切img大小', `${getBase64FileSize(img)}KB`)
    console.info('cropData', cropData)
    console.info('photo', photo)
    console.info('photoData', photoData)
  }
  onDelete = (success: Function) => console.info('deleteSuccess', success)
  onScaleLarge = () => console.info('onScaleLarge')
  onScaleSmall = () => console.info('onScaleSmall')
  onRotate = () => console.info('onRotate')

  clickOnTitle = () => {
    console.info(this.cropper?.getCroppedCanvas()?.toDataURL('image/jpeg'))
    // this.setState({
    //   src:
    //     Math.random(),
    // })
  }

  getCropper = (type: string, value: any) => {
    // console.info(type, value)
    /**
     * type: cropper | file
     *
     * cropper 画板对象
     * file 文件对象
     */
    if (type === 'cropper') {
      this.cropper = value
    }
  }

  changeSrc = () =>
    this.setState({
      src: imgSrc,
    })

  render() {
    const { src } = this.state
    return (
      <div>
        <h2>页面模式</h2>
        <Button
         
          onClick={this.changeSrc}
        >
          点击改变图片src
        </Button>
        <Title
         
          title={'照片编辑'}
          buttons={[
            <Button
              onClick={this.clickOnTitle}
             
              key="a"
            >
              确定
            </Button>,
          ]}
        />
        <ImageCropper
         
          getCropper={this.getCropper}
          type={'photo'}
          src={src}
          onChange={this.onChange}
          noDialog
          showSettingBtn
          uploadParams={{
            uploadUrl: '/api/file/module/upload',//'/api/hrm/profile/upload',
            uploadParams: { size: 10, module: 'hrm' },
            limitType: 'jpg,png,jpeg,gif,bmp',
            maxSize: 10,
            onSuccess: this.onSuccess,
            onerror: this.onError
          }}
          preview={'preview'}
          emptyShow={
            <Icon
             
              name="Icon-personnel02"
              size="xs"
              style={{
                width: '150px',
                height: '150px',
                color: '#D7D7D7',
                backgroundColor: '#f7f7f7',
              }}
            />
          }
          onConfirm={this.onConfirm}
          onDelete={this.onDelete}
          onScaleLarge={this.onScaleLarge}
          onScaleSmall={this.onScaleSmall}
          onRotate={this.onRotate}
        />
      </div>
    )
  }
}
```

### 设置头像与照片初始化src

设置头像与照片初始化src

```jsx
import React from 'react'
import { ImageCropper, Button, Icon, Title, UploadData, utils } from '@weapp/ui'
import imgSrc from "../../../../assets/images/dKbkpPXKfvZzWCM.png"
const { getBase64FileSize } = utils

interface StateType {
  src: string
}
export default class ImageCropperDemo extends React.Component<any, StateType> {
  cropper: any = null
  constructor(props: any) {
    super(props)
    this.state = {
      src: imgSrc,
      // src: ''
    }
  }

  onChange = (src: string) => this.setState({ src })
  onConfirm = (img: string, cropData?: any, photo?: string, photoData?: any) => {
    console.info('img', img)
    console.info('裁切img大小', `${getBase64FileSize(img)}KB`)
    console.info('cropData', cropData)
    console.info('photo', photo)
    console.info('photoData', photoData)
  }
  getCropper = (type: string, value: any) => {
    // console.info(type, value)
    /**
     * type: cropper | file
     *
     * cropper 画板对象
     * file 文件对象
     */
    if (type === 'cropper') {
      this.cropper = value
    }
  }
  changeSrc = () => this.setState({ src: imgSrc, })

  render() {
    const { src } = this.state
    return (
      <div>
        <h2>页面模式</h2>
        <Button
         
          onClick={this.changeSrc}
        >
          点击改变图片src
        </Button>
        <ImageCropper
         
          getCropper={this.getCropper}
          type={'photo'}
          src={src}
          onChange={this.onChange}
          defaultShowCrop={false}
          defaultPreviewSrc={imgSrc}
          defaultPhotoPreviewSrc={'/build/ui/demo/assets/photo-view/1.jpg'}
          // defaultPreviewSrc=""
          // defaultPhotoPreviewSrc=''
          noDialog
          showSettingBtn
          uploadParams={{
            uploadUrl: '/api/file/module/upload',//'/api/hrm/profile/upload',
            uploadParams: { id: `${+new Date()}`, size: 10, module: 'hrm' },
            limitType: 'jpg,png,jpeg,gif,bmp',
            maxSize: 10,
          }}
          preview={'preview'}
          onConfirm={this.onConfirm}
        />
      </div>
    )
  }
}
```

## API

### 注意：

```
头像（照片）裁切版本说明：
1.当照片默认预览或头像默认预览所给src加载失败时，预览页面会直接显示裁切后的图像
2.新老版本裁切通过api：uploadType 来控制（默认为老版本的'sync'，新版本为'async'）
（1）老版本的头像裁切，上传只是调用了upload组件内部的上传方法对上传文件进行base64解析，实际上传成功对照片是否改变无影响（同步上传）
（2）老版本的头像裁切，需要通过开启 isCropAutoUpload 参数，在onConfirm触发时触发上传操作，其相关参数为cropUploadParams，cropUploadUrl等
（3）新版本的头像照片裁切，上传已经替换为实际的upload组件，只有在上传成功后，才会更新图片
（4）新版本的头像照片裁切添加了受控逻辑，需要在upload的回调事件里更新src，具体使用逻辑以及交互可以参考demo
（5）2023-03-09更新的头像照片裁切以及移动端的裁切，uploadType参数默认为新版的'async'
模块需注意！！！：
（1）组件按照产品的需求给定了最小宽度并添加了滚动条兼容，原有样式需要确认
（2）有部分模块在老版本的内部图片上传参数未给全，导致内部上传报错，但由于真正上传是在onConform时触发，导致此报错一直未发现，需要兼容此报错（或者切换为最新的上传版本）
```

### 参数说明如下：

| 参数 | 说明 | 类型 | 可选 | 默认 |
| --- | --- | --- | --- | --- |
| src | 图片链接地址 | string |  |  |
| defaultSrc | 默认展示图片地址 | string |  |  |
| uploadParams | 上传按钮相关参数 | UploadProps | - |  |
| accept | 文件上传类型 | string |  |  |
| onDelete | 【删除照片】按钮的回调 | (success: Function) => void | - |  |
| onScaleLarge | 【放大照片】按钮的回调 | () => void | - |  |
| onScaleSmall | 【缩小照片】按钮的回调 | () => void | - |  |
| onRotate | 【旋转照片】按钮的回调 | () => void | - |  |
| visible | Dialog弹窗visible受控 | boolean |  |  |
| noDialog | 展示模式控制，是否为弹窗模式 | boolean | - |  |
| preview | 用于展示的 dom 类名 | string |  |  |
| previewStyle | 用于展示的 dom 样式 | CSSProperties |  |  |
| photoPreviewStyle | 用于展示照片的 dom 样式 | CSSProperties |  |  |
| previewText | 预览区顶部自定义文案 | ReactNode |  |  |
| cropperText | 裁剪区顶部自定义文案 | ReactNode |  |  |
| cropperStyle | 用于展示的 dom 样式 | CSSProperties(最小宽度为 200px) |  |  |
| onConfirm | Dialog【确定】按钮的回调 | (img: string, cropData?: Cropper.Data, photo?: string, photoData?: Cropper.Data, allData?: any) => void |  |  |
| getCropper | 获取组件内置的对象 | (type: `cropper`\|`file`, value: any) => void; |  |  |
| emptyShow | 无图的默认展示 | ReactNode |  |  |
| aspectRatio | 裁剪框宽高比例 | number |  | 1 / 1 |
| dragMode | 拖拽方式 | `crop` \| `move` \| `none` |  | `crop` |
| onChange | 选择文件后 src 改变回调 | (img: string, cropData?: Cropper.Data, photo?: string, photoData?: Cropper.Data) => void |  |  |
| showDelete | 是否展示"删除照片"按钮 | boolean |  | true |
| showEnlargeBtn | 是否展示"放大"按钮 | boolean |  | true |
| showShrinkBtn | 是否展示"缩小"按钮 | boolean |  | true |
| showRotateBtn | 是否展示"旋转"按钮 | boolean |  | true |
| onBeforeDelete | 删除按钮点击前拦截 | () => Promise |  |  |
| onBeforeSelect | 选择文件按钮点击前拦截 | () => Promise |  |  |
| onBeforeUpload | 上传事件拦截 | (uploadParams: any) => Promise |  |  |
| cropperOption | Cropper 配置项,参考文档 | Cropper.Options |  |  |
| errorDisplayImg(废弃) | 接口上传失败是否回显图片 | boolean |  | true(回显) |
| hasLoading | 是否添加 loading 状态 | string |  | true |
| defaultShowCrop | 是否默认显示裁剪框 | boolean |  | true |
| isCropAutoUpload | 裁剪后点击确定是否自动上传 | boolean |  |  |
| cropUploadParams | 裁剪自动上传接口传参 | any |  |  |
| cropUploadUrl | 自定义裁剪自动上传接口 | string |  |  |
| autoUploadCallback | 自动上传回调 | (result: any) => void |  |  |
| cropAutoUploadFileType | 自动上传的方式 | 'base64' \| 'fileStream' |  | 'base64' |
| ref | 获取 dom 元素 | any |  |  |
| rotateTo | 图片旋转角度 | number |  |  |
| defaultPreviewSrc | 显示头像默认预览框框内容（defaultShowCrop 为 false 时生效） | string |  |  |
| defaultPhotoPreviewSrc | 显示照片默认预览框框内容（defaultShowCrop 为 false 时生效） | string |  |  |
| onCancel | 取消事件回调 | () => void |  |  |
| onClose | 关闭事件回调 | () => void |  |  |
| dialogProps | 对话框相关属性 | DialogProps |  |  |
| showSettingBtn | 展示设置按钮 | boolean |  |  |
| type | 区分头像裁切和头像照片裁切模式 | `avatar` \| `photo` |  | `avatar` |
| uploadFileMaxSize | 上传文件大小限制（以MB为单位） | number |  | 2 |
| onSuccess | 上传成功回调 | (uploadData: any, response?: any) => void |  |  |
| onError | 上传失败回调 | (uploadData: any, response?: any) => void |  |  |
| uploadType | 头像裁切默认模式 | `sync` \| `async` |  | `sync` |
| confirmButtonDisabled | 自定义确定按钮的禁用状态 | boolean |  |  |
| base64Type | 默认裁切出来的base64图片文件类型（png的体积较大，请慎重选择） | `png` \| `jpeg` \| `webp` |  | `webp` |
> 所有拦截事件 resolve 传入 false 时将不会执行原事件
> 
> 手动上传裁剪后的图片： ref.current.handleUpload()
