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

介绍

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

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

示例

codesandbox.io/s/y3y6y80yk…

安装

yarn add antd-img-crop
复制代码

使用

用法非常简单，直接在 Upload 父级加上 ImgCrop，即可实现裁切图片的功能。

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

<ImgCrop>
  <Upload>+ Add image</Upload>
</ImgCrop>
复制代码

Props

modalTitle

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

图片裁切弹窗的标题

width

类型：number，默认：100

height

类型：number，默认：100

使用 width 与 height 获取裁切区域的比例。（而不是定义裁切区域的真实长度）

例如默认 height 为 100，若只传入 width={500}，则裁切区域长宽比为 5 / 1

scale

类型：number，默认：80

使用 scale 来获取裁切区域的大小

例如当 scale = 100 时，裁切区域将占满图片的宽度或高度