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

裁切是否可調整大小、可拖動。