@lukywong/antd-img-crop

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