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

Before antd v5

If you use antd<=v4 with babel-plugin-import, and no Modal or Slider were used in project, 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. 🌈