Antd-img-crop, using Ant Design Upload cropped image

introduce

We often encounter situations where we need to upload a fixed size image, such as changing a profile picture. In this case, you need to crop the image first, which Ant Desgin does not provide by default.

Antd-img-crop is a component that wraps Ant Design Upload, which can crop and then Upload the cropped image before uploading it.

The sample

Codesandbox. IO/s / 4 qoom5p9x…

The installation

yarn add antd-img-crop
Copy the code

use

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

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

Props

beforeCrop

Type: function, default: –

Execute before image pruning. If false is returned, the popbox will not open. (Promise not supported)

The beforeUpload property of the Ant Design Upload component is executed after images are cropped but before they are uploaded.

modalTitle

Type: string, default: “Edit picture”

Popover title.

modalWidth

Type: number. Default: 520

Popover width.

width

Type: number. Default: 100

Cutting width, unit: px.

height

Type: number. Default: 100

Cutting height, unit: px.

resize

Type: Boolean, default: true

Whether the cutting is adjustable.

resizeAndDrag