- Notifications
You must be signed in to change notification settings - Fork164
🗡 An image cropper for Ant Design Upload
License
NotificationsYou must be signed in to change notification settings
nanxiaobei/antd-img-crop
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Link in bio towidgets,your onlinehome screen. ➫🔗 kee.so
An image cropper for Ant DesignUpload
English |简体中文
pnpm add antd-img-crop# oryarn add antd-img-crop# ornpm i antd-img-crop
import{Upload}from'antd';importImgCropfrom'antd-img-crop';constDemo=()=>(<ImgCrop><Upload>+ Add image</Upload></ImgCrop>);
| Prop | Type | Default | Description |
|---|---|---|---|
| quality | number | 0.4 | Cropped image quality,0 to1 |
| fillColor | string | 'white' | Fill color for cropped image |
| zoomSlider | boolean | true | Enable zoom |
| rotationSlider | boolean | false | Enable rotation |
| aspectSlider | boolean | false | Enable aspect |
| 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 |
| maxZoom | number | 3 | Maximum zoom |
| minAspect | number | 0.5 | Minimum aspect |
| maxAspect | number | 2 | Maximum aspect |
| 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 returnfalse orreject(), modal will not open |
Try to setlibraryDirectory('es' or'lib') tobabel-plugin-import config, see which one will work.
module.exports={plugins:[['import',{libraryName:'antd',libraryDirectory:'es',style:true}],],};
If you useantd<=v4 +babel-plugin-import, and noModal orSlider were imported, please import these styles manually:
import'antd/es/modal/style';import'antd/es/slider/style';
About
🗡 An image cropper for Ant Design Upload
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
No releases published
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.