An image cropper for Ant Design Upload

Usage no npm install needed!

<script type="module">
  import antdImgCrop from '';



An image cropper for Ant Design Upload.

npm npm npm bundle size GitHub

English | 简体中文


Edit antd-img-crop


yarn add antd-img-crop

# npm install antd-img-crop


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

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


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
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
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';


ConfigProvider not work?

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 }]],


MIT License (c) nanxiaobei


Try FUTAKE in WeChat. A mini app for your inspiration moments. 🌈