antd-img-crop，使用 Ant Design Upload 時裁切圖片

介紹

咱們常常會遇到，須要上傳固定尺寸圖片的場景，好比更換頭像圖片等。這時就須要先對圖片進行裁切，Ant Desgin 默認並無提供這樣的功能。

antd-img-crop 是一個用於包裝 Ant Design Upload 的組件，可實如今上傳前，先對圖片進行裁切，而後上傳裁切後的圖片。

示例

codesandbox.io/s/4qoom5p9x…

安裝

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

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