@cocalc/antd-img-crop

antd-img-crop

NOTE: This is a fork of upstream https://github.com/nanxiaobei/antd-img-crop/issues/214, because I need common js support still. This tries to provide it but it can't because it explicitly imports things from within in antd that aren't in the top-level antd import, and I think the current approach to supporting both CommonJS and ES Modules at once just isn't good enough to support this, sadly. I also explicitly removed the ES module support from this module since there's no way I can see to make it work, and wanted to avoid confusion.

An image cropper for Ant Design Upload

English | 简体中文

Demo

Install

yarn add antd-img-crop

# npm install 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
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)

Before antd v5

No style?

If you use babel-plugin-import and no Modal or Slider were imported, please import the styles manually:

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

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