1.1.1 • Published 4 years ago

@hegafaisal/antd-img-crop v1.1.1

Weekly downloads
-
License
MIT
Repository
github
Last release
4 years ago

@hegafaisal/antd-img-crop

A fork of antd-img-crop 3.16.0

antd-img-crop

An image cropper for Ant Design Upload.

npm npm npm bundle size GitHub

English | 简体中文

Install

npm install @hegafaisal/antd-img-crop

Usage

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

const Demo = () => (
  <ImgCrop>
    <Upload>+ Add image</Upload>
  </ImgCrop>
);

Props

PropTypeDefaultDescription
aspectnumber1 / 1Aspect of crop area , width / height
shapestring'rect'Shape of crop area, 'rect' or 'round'
gridbooleanfalseShow grid of crop area (third-lines)
qualitynumber0.4Image quality, 0 ~ 1
fillColorstring'white'Fill color when cropped image smaller than canvas
zoombooleantrueEnable zoom for image
rotatebooleanfalseEnable rotate for image
minZoomnumber1Minimum zoom factor
maxZoomnumber3Maximum zoom factor
modalTitlestring'Edit image'Title of modal
modalWidthnumber | string520Width of modal in pixels number or percentages
modalOkstring'OK'Text of modal confirm button
modalCancelstring'Cancel'Text of modal cancel button
onModalOkfunction-Call when click modal confirm button
onModalCancelfunction-Call when click modal mask, top right "x", or cancel button
beforeCropfunction-Call before modal open, if return false, it'll not open
onUploadFailfunction-Call when upload failed
cropperPropsobject-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 your project configured babel-plugin-import and no Modal or Slider were used, you need to import the styles manually:

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

License

MIT License (c) nanxiaobei

Pitiless Ads

If you use WeChat, please try "FUTAKE". It's a WeChat mini app for your inspiration moments. 🌈

FUTAKE