antd-img-crop

An image cropper for Ant Design Upload.

English | 简体中文

Demo

Live demo

Install

yarn add antd-img-crop

Usage

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

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

Props

| Prop | Type | Default | Description | | ----------- | -------------------- | -------------- | ----------------------------------------------------------- | | aspect | number | 1 / 1 | Aspect of crop area , width / height | | shape | string | 'rect' | Shape of crop area, 'rect' or 'round' | | grid | boolean | false | Show grid of crop area (third-lines) | | zoom | boolean | true | Enable zoom for image | | rotate | boolean | false | Enable rotate for image | | beforeCrop | function | - | Called before modal open, if return false, it'll not open | | modalTitle | string | 'Edit image' | Title of modal | | modalWidth | number | string | 520 | Width of modal in pixels or percentages | | modalOk | string | 'OK' | Text of confirm button of modal | | modalCancel | string | 'Cancel' | Text of cancel button of modal |

Styles

To prevent overwriting the custom styles to antd, antd-img-crop does not import the style files of components.

Therefore, if your project configured babel-plugin-import, and not use Modal or Slider, you need to import the styles yourself:

import 'antd/es/modal/style';
import 'antd/es/slider/style';

License

MIT License (c) nanxiaobei