antd-img-crop，使用 Ant Design Upload 时裁切图片

介绍

我们经常会遇到，需要上传固定尺寸图片的场景，比如更换头像图片等。这时就需要先对图片进行裁切，Ant Desgin 默认并没有提供这样的功能。

antd-img-crop 是一个用于包装 Ant Design Upload 的组件，可实现在上传前，先对图片进行裁切，然后上传裁切后的图片。

示例

https://codesandbox.io/s/4qoom5p9x4

安装

yarn add antd-img-crop
复制代码

使用

import ImgCrop from 'antd-img-crop';
import { Upload } from 'antd';

const Demo = () => (
  <ImgCrop>
    <Upload>+ Add image</Upload>
  </ImgCrop>
);
复制代码

Props

beforeCrop

类型：function，默认：-

图片裁切前执行，若返回 false，弹框将不会打开。（不支持 Promise）

Ant Design Upload 组件的 beforeUpload 属性在图片裁切后、上传前执行。

modalTitle

类型：string，默认："编辑图片"

弹窗标题。

modalWidth

类型：number，默认：520

弹窗宽度。

width

类型：number，默认：100

裁切宽度，单位 px。

height

类型：number，默认：100

裁切高度，单位 px。

resize

类型：boolean，默认：true

裁切是否可调整大小。

resizeAndDrag

类型：boolean，默认：true

裁切是否可调整大小、可拖动。