/antd-img-crop

🔪 An image cropper for Ant Design Upload

Primary LanguageTypeScriptMIT LicenseMIT

antd-img-crop

An image cropper for Ant Design Upload

npm npm npm bundle size GitHub npm type definitions

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

Edit antd-img-crop

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. 🌈