antd-image-cropper
另一个图片裁切工具，用于 Ant Design Upload 组件。
示例
为什么做？
项目需要一个图片裁剪工具，通过搜索发现目前有 antd-img-crop 和 react-cropper，但是 antd-img-crop 过于简陋，而 react-cropper 依赖了 cropper.js 过于大，所以才重新做了一个。
安装
yarn add antd-image-cropper使用
import ImageCropper from 'antd-image-cropper'
import { Upload } from 'antd'
const Demo = () => (
<ImageCropper>
<Upload>+ Add image</Upload>
</ImageCropper>
)Props
| 属性 | 类型 | 默认 | 说明 |
|---|---|---|---|
| crop | boolean |
true |
是否开启裁剪 |
| aspectRatio | number |
- | 裁切区域宽高比，width / height
|
| cropWidth | number |
- | 裁剪宽度 |
| cropHeight | number |
- | 裁剪高度 |
| minWidth | number |
- | 裁剪区域最小宽度 |
| maxWidth | number |
- | 裁剪区域最大宽度 |
| minHeight | number |
- | 裁剪区域最小高度 |
| maxHeight | number |
- | 裁剪区域最大高度 |
| circularCrop | boolean |
false |
裁切区域是否为圆形 |
| grid | boolean |
false |
显示裁切区域网格（九宫格） |
| quality | number |
- | 图片质量，0 ~ 1
|
| modalTitle | string |
'裁剪图片' |
弹窗标题 |
| modalWidth |
number | string
|
- | 弹窗宽度，px 的数值或百分比 |
| modalOk | string |
'确定' |
弹窗确定按钮文字 |
| modalCancel | string |
'取消' |
弹窗取消按钮文字 |