antd-cropper-img
The best image cropper for Ant Design Upload
What is this?
This package is a React component that can show Cropperjs modal before upload image in ant design.
Table of Contents
Installation
You can install this package in two ways simultaneously
install with npm
npm install antd-cropper-img
install with yarn
yarn add antd-cropper-img
Usage
import { Upload } from 'antd';
import CropperImage from 'antd-cropper-img';
const App = () => (
<CropperImage>
<Upload>+ Add image</Upload>
</CropperImage>
)
Demo
Props
props are divided into two groups, CropperProps
and ModalProps
Cropper
dragMode
- Type:
String
- Default:
'crop'
- Options:
'crop'
: create a new crop box'move'
: move the canvas'none'
: do nothing
Define the dragging mode of the cropper.
initialAspectRatio
Define the initial aspect ratio of the crop box. By default, it is the same as the aspect ratio of the canvas (image wrapper).
Only available when the aspect
option is set to NaN
.
aspect
Define the fixed aspect ratio of the crop box. By default, the crop box has a free ratio.
initialCrop
- Type:
initialCropProps
- Default:
null
initialize cropper image
checkCrossOrigin
- Type:
Boolean
- Default:
true
Check if the current image is a cross-origin image.
If so, a crossOrigin
attribute will be added to the cloned image element, and a timestamp parameter will be added to the src
attribute to reload the source image to avoid browser cache error.
Adding a crossOrigin
attribute to the image element will stop adding a timestamp to the image URL and stop reloading the image. But the request (XMLHttpRequest) to read the image data for orientation checking will require a timestamp to bust the cache to avoid browser cache error. You can set the checkOrientation
option to false
to cancel this request.
guides
- Type:
Boolean
- Default:
true
Show the dashed lines above the crop box.
center
- Type:
Boolean
- Default:
true
Show the center indicator above the crop box.
movable
- Type:
Boolean
- Default:
true
Enable to move the image.
restore
- Type:
Boolean
- Default:
true
Restore the cropped area after resizing the window.
rotatable
- Type:
Boolean
- Default:
true
Enable to rotate the image.
scalable
- Type:
Boolean
- Default:
true
Enable to scale the image.
zoomable
- Type:
Boolean
- Default:
true
Enable to zoom the image.
zoomOnTouch
- Type:
Boolean
- Default:
true
Enable to zoom the image by dragging touch.
zoomOnWheel
- Type:
Boolean
- Default:
true
Enable to zoom the image by mouse wheeling.
wheelZoomRatio
Define zoom ratio when zooming the image by mouse wheeling.
cropBoxMovable
- Type:
Boolean
- Default:
true
Enable to move the crop box by dragging.
minZoom
Minimum zoom factor.
maxZoom
Maximum zoom factor.
cropBoxResizable
- Type:
Boolean
- Default:
true
Enable to resize the crop box by dragging.
toggleDragModeOnDblclick
- Type:
Boolean
- Default:
true
Enable to toggle drag mode between "crop"
and "move"
when clicking twice on the cropper.
Requires dblclick
event support.
minContainerWidth
The minimum width of the container.
minContainerHeight
The minimum height of the container.
minCanvasWidth
The minimum width of the canvas (image wrapper).
minCanvasHeight
The minimum height of the canvas (image wrapper).
minCropBoxWidth
The minimum width of the crop box.
Note: This size is relative to the page, not the image.
minCropBoxHeight
The minimum height of the crop box.
Note: This size is relative to the page, not the image.
Modal
modalTitle
- Type:
String
- Default:
'Edit image'
Title of modal.
modalWidth
- Type:
Number
| String
- Default:
520
Width of modal in pixels number or percentages.
okText
- Type:
String
- Default:
'OK'
Text of modal confirm button.
cancelText
- Type:
String
- Default:
'Cancel'
Text of modal cancel button.
closable
- Type:
Boolean
- Default:
true
Whether a close (x) button is visible on top right of the modal dialog or not.
closeIcon
- Type:
ReactNode
- Default:
undefined
Custom close icon.
hasMask
- Type:
Boolean
- Default:
true
Whether show mask or not.
maskTransitionName
- Type:
String
- Default:
'fade'
MaskTransitionName of modal, use 'none'
to disable the default transition effect.
modalTransitionName
- Type:
String
- Default:
'fade'
TransitionName of modal, use 'none'
to disable the default transition effect.
wrapClassName
The class name of the container of the modal dialog.
onModalOk
Call when click modal confirm button.
onModalCancel
Call when click modal mask, top right "x", or cancel button.
afterCloseModal
Specify a function that will be called when modal is closed completely.
zIndex
- Type:
Number
- Default:
1000
The z-index
of the Modal.
modalStyle
- Type:
CSSProperties
- Default: -
Style of floating layer, typically used at least for adjusting the position.
maskStyle
- Type:
CSSProperties
- Default: -
Style for modal's mask element.
bodyStyle
- Type:
CSSProperties
- Default: -
Body style for modal body element. Such as height, padding etc.
beforeCrop
Call before modal open, if return false
, it'll not open.
onUploadFail
Call when upload failed.
Creator
Sina Shah Oveisi @sinashahoveisi
I love programming. I am interested in popular frameworks or programming languages and I am currently coding with JavaScript and React framework.
License
MIT License © Sina Shahoveisi