antd-img-clip

An image cropper for Ant Design Upload.

English | 简体中文

Demo

Install

yarn add antd-img-clip

Usage

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

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

Props

| Name | Type | Default | Description | | ------------- | ---------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | width | number | 100 | Crop width in px. If useRatio is true, it'll be ratio. | | height | number | 100 | Crop height in px. If useRatio is true, it'll be ratio. | | useRatio | boolean | false | If use width and height as ratio, not real px. And crop will fill the width or height. e.g. width={500} height={400} and width={5} height={4} are exactly the same. | | resize | boolean | true | If crop can resize. | | resizeAndDrag | boolean | true | If crop can resize and drag. | | modalTitle | string | "Edit image" | Modal title. | | modalWidth | number | 520 | Modal width in px. | | beforeCrop | function | - | Execute before crop, if return false, modal will not open (Not support Promise). Ant Design Upload beforeUpload prop will execute after crop, before upload. |

License

MIT License (c) nanxiaobei