An image cropper for Ant Design Upload
English | 简体ä¸æ–‡
- add
outputType
attribute beforeCrop
returnfalse
also calledbeforeUpload
for Upload
yarn add antd-img-crop@git://github.com/tangbzai/antd-img-crop.git#Custom
# npm install antd-img-crop@git://github.com/tangbzai/antd-img-crop.git#Custom
import ImgCrop from 'antd-img-crop';
import { Upload } from 'antd';
const Demo = () => (
<ImgCrop>
<Upload>+ Add image</Upload>
</ImgCrop>
);
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) |
quality | number |
0.4 |
Image quality, 0 ~ 1 |
fillColor | string |
'white' |
Fill color when cropped image smaller than canvas |
outputType | string |
- | cropped image output type |
zoom | boolean |
true |
Enable zoom for image |
rotate | boolean |
false |
Enable rotate for image |
minZoom | number |
1 |
Minimum zoom factor |
maxZoom | number |
3 |
Maximum zoom factor |
modalTitle | string |
'Edit image' |
Title of modal |
modalWidth | number | string |
520 |
Width of modal in pixels number or percentages |
modalOk | string |
'OK' |
Text of modal confirm button |
modalCancel | string |
'Cancel' |
Text of modal cancel button |
modalMaskTransitionName | string |
'fade' |
MaskTransitionName of modal, use 'none' to disable the default transition effect |
modalTransitionName | string |
'fade' |
TransitionName of modal, use 'none' to disable the default transition effect |
modalClassName | string |
'' |
Provide your own classname for the Modal container |
onModalOk | function |
- | Call when click modal confirm button |
onModalCancel | function |
- | Call when click modal mask, top right "x", or cancel button |
beforeCrop | function |
- | Call before modal open, if return false , it'll not open |
onUploadFail | function |
- | Call when upload failed |
cropperProps | object |
- | Props of react-easy-crop (* existing props cannot be overridden) |
To prevent overwriting the custom styles to antd
, antd-img-crop
does not import the style files of components.
Therefore, if you configured babel-plugin-import
and no Modal
or Slider
were used, please import the styles manually:
import 'antd/es/modal/style';
import 'antd/es/slider/style';
If using craco-antd
, please try to add libraryDirectory: 'es'
to craco.config.js
:
module.exports = {
plugins: [
{
plugin: CracoAntDesignPlugin,
options: {
// other options...
+ babelPluginImportOptions: {
+ libraryDirectory: 'es',
+ },
},
},
],
};
Or if configuring babel-plugin-import
manually, please try to set libraryDirectory: 'es'
to .babelrc.js
:
module.exports = {
plugins: [
['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
],
};
Try FUTAKE in WeChat. A mini app for your inspiration moments. 🌈