huemix-antd-img-crop
v3.9.1
Published
An image cropper for Ant Design Upload
Downloads
2
Maintainers
Readme
antd-img-crop
An image cropper for Ant Design Upload.
English | 简体中文
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';