0.0.2 • Published 8 months ago
antd-img-crop-enhance v0.0.2
基于 antd-img-crop@4.23.0 的增强
- 支持自定义 zoomStep
- 实例方法支持 setAspect
Link in bio to widgets, your online home screen. ➫ 🔗 kee.so
antd-img-crop
An image cropper for Ant Design Upload
English | 简体中文
Install
pnpm add antd-img-crop
# or
yarn add antd-img-crop
# or
npm i antd-img-cropUsage
import { Upload } from 'antd';
import ImgCrop from 'antd-img-crop';
const Demo = () => (
<ImgCrop>
<Upload>+ Add image</Upload>
</ImgCrop>
);
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| quality | number | 0.4 | Cropped image quality, 0 to 1 |
| fillColor | string | 'white' | Fill color for cropped image |
| zoomSlider | boolean | true | Enable zoom adjustment |
| rotationSlider | boolean | false | Enable rotation adjustment |
| aspectSlider | boolean | false | Enable aspect adjustment |
| showReset | boolean | false | Show reset button to reset zoom rotation aspect |
| resetText | string | Reset | Reset button text |
| aspect | number | 1 / 1 | Aspect of crop area , width / height |
| minZoom | number | 1 | Minimum zoom factor |
| maxZoom | number | 3 | Maximum zoom factor |
| zoomStep | number | 0.1 | Zoom step |
| cropShape | string | 'rect' | Shape of crop area, 'rect' or 'round' |
| showGrid | boolean | false | Show grid of crop area (third-lines) |
| cropperProps | object | - | react-easy-crop props (* existing props cannot be overridden) |
| modalClassName | string | '' | Modal classname |
| modalTitle | string | 'Edit image' | Modal title |
| modalWidth | number | string | Modal width |
| modalOk | string | Ok button text | |
| modalCancel | string | Cancel button text | |
| onModalOk | function | - | Callback of click ok button |
| onModalCancel | function | - | Callback of click cancel button (or modal mask & top right "x") |
| modalProps | object | Ant Design Modal props (* existing props cannot be overridden) | |
| beforeCrop | function | - | Callback before crop modal, if return false or reject(), modal will not open |
Ref
setAspect: (a: number) => void;
FAQ
ConfigProvider not work?
Try to set libraryDirectory('es' or 'lib') to babel-plugin-import config, see which one will work.
module.exports = {
plugins: [
['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
],
};No style? (only antd<=v4)
If you use antd<=v4 + babel-plugin-import, and no Modal or Slider were imported, please import these styles manually:
import 'antd/es/modal/style';
import 'antd/es/slider/style';