limichange / antd-img-crop

🔪 An image cropper for Ant Design Upload

antd-img-crop

An image cropper for Ant Design Upload.

English | 简体中文

Demo

Live demo

Install

yarn add antd-img-crop

Usage

import ImgCrop from 'antd-img-crop';
import { Upload } from 'antd';

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)
zoom	boolean	true	Enable zoom for image
rotate	boolean	false	Enable rotate for image
beforeCrop	function	-	Called before modal open, if return false, it'll not open
modalTitle	string	'Edit image'	Title of modal
modalWidth	number | string	520	Width of modal in pixels or percentages
modalOk	string	'OK'	Text of confirm button of modal
modalCancel	string	'Cancel'	Text of cancel button of modal

Styles

To prevent overwriting the custom styles to antd, antd-img-crop does not import the style files of components.

Therefore, if your project configured babel-plugin-import, and not use Modal or Slider, you need to import the styles yourself:

import 'antd/es/modal/style';
import 'antd/es/slider/style';

License

MIT License (c) nanxiaobei