antd-img-crop

An image cropper for Ant Design Upload

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
aspectAdjust	`boolean`	`false`	Enable aspect adjustment 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)

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

Jambo2018/antd-img-crop