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-crop

Usage

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 | | 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 | - | Ok button callback | | onModalCancel | function | - | Cancel button, modal mask, top right "x" callback | | modalProps | object | | Ant Design Modal props (* existing props cannot be overridden) | | beforeCrop | function | - | Upload button callback, if return false or reject, modal will not open |

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

License

MIT License (c) nanxiaobei

FUTAKE

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