介绍

我们有时会遇到上传图片前先进行裁切的需求，比如更换头像，Ant Desgin Upload 组件没有提供裁切功能，antd-img-crop 的出现，就是这样专门来应付这样的场景。

GitHub

github.com/nanxiaobei/…

使用

yarn add antd-img-crop

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

const Demo = () => (
  <ImgCrop>
    <Upload>+ Add image</Upload>
  </ImgCrop>
);

使用起来非常简单，直接对 Upload 包裹一下就行。

示例

Ξ在线示例Ξ

3.0 新功能

♦ 使用 React Hooks 重构，优化性能
♦ 裁切库依赖更新为 react-easy-crop
♦ 可使用鼠标控制图片放大缩小
♦ 增加 shape 属性，可选择裁切框为圆形
♦ 增加 rotate 功能，可对图片进行旋转