antd-img-crop

An image cropper for Ant Design Upload

English | 简体中文

Different parts

• add outputType attribute
• beforeCrop return false also called beforeUpload for Upload

Demo

Install

yarn add antd-img-crop@git://github.com/tangbzai/antd-img-crop.git#Custom

# npm install antd-img-crop@git://github.com/tangbzai/antd-img-crop.git#Custom

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)
quality	number	0.4	Image quality, 0 ~ 1
fillColor	string	'white'	Fill color when cropped image smaller than canvas
outputType	string	-	cropped image output type
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)

Styles

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

Therefore, if you configured babel-plugin-import and no Modal or Slider were used, please import the styles manually:

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

FAQ

ConfigProvider not work?

If using craco-antd, please try to add libraryDirectory: 'es' to craco.config.js:

module.exports = {
  plugins: [
    {
      plugin: CracoAntDesignPlugin,
      options: {
        // other options...
+       babelPluginImportOptions: {
+         libraryDirectory: 'es',
+       },
      },
    },
  ],
};

Or if configuring babel-plugin-import manually, please try to set libraryDirectory: 'es' to .babelrc.js:

module.exports = {
  plugins: [
    ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
  ],
};

License

MIT License (c) nanxiaobei

FUTAKE

Try FUTAKE in WeChat. A mini app for your inspiration moments. 🌈