Package Exports

42-antd-img-crop
42-antd-img-crop/dist/42-antd-img-crop.cjs.js
42-antd-img-crop/dist/42-antd-img-crop.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (42-antd-img-crop) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

42-antd-img-crop