Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
antd-cropper-img
Advanced tools
The best image cropper for Ant Design Upload
This package is a React component that can show Cropperjs modal before upload image in ant design.
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
import { Upload } from 'antd';
import CropperImage from 'antd-cropper-img';
const App = () => (
<CropperImage>
<Upload>+ Add image</Upload>
</CropperImage>
)
props are divided into two groups, CropperProps
and ModalProps
String
'crop'
'crop'
: create a new crop box'move'
: move the canvas'none'
: do nothingDefine the dragging mode of the cropper.
Number
NaN
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 toNaN
.
Number
NaN
Define the fixed aspect ratio of the crop box. By default, the crop box has a free ratio.
initialCropProps
null
initialize cropper image
Boolean
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.
Boolean
true
Show the dashed lines above the crop box.
Boolean
true
Show the center indicator above the crop box.
Boolean
true
Enable to move the image.
Boolean
true
Restore the cropped area after resizing the window.
Boolean
true
Enable to rotate the image.
Boolean
true
Enable to scale the image.
Boolean
true
Enable to zoom the image.
Boolean
true
Enable to zoom the image by dragging touch.
Boolean
true
Enable to zoom the image by mouse wheeling.
Number
0.1
Define zoom ratio when zooming the image by mouse wheeling.
Boolean
true
Enable to move the crop box by dragging.
Number
1
Minimum zoom factor.
Number
3
Maximum zoom factor.
Boolean
true
Enable to resize the crop box by dragging.
Boolean
true
Enable to toggle drag mode between "crop"
and "move"
when clicking twice on the cropper.
Requires
dblclick
event support.
Number
200
The minimum width of the container.
Number
100
The minimum height of the container.
Number
0
The minimum width of the canvas (image wrapper).
Number
0
The minimum height of the canvas (image wrapper).
Number
0
The minimum width of the crop box.
Note: This size is relative to the page, not the image.
Number
0
The minimum height of the crop box.
Note: This size is relative to the page, not the image.
String
'Edit image'
Title of modal.
Number
| String
520
Width of modal in pixels number or percentages.
String
'OK'
Text of modal confirm button.
String
'Cancel'
Text of modal cancel button.
Boolean
true
Whether a close (x) button is visible on top right of the modal dialog or not.
ReactNode
undefined
Custom close icon.
Boolean
true
Whether show mask or not.
String
'fade'
MaskTransitionName of modal, use 'none'
to disable the default transition effect.
String
'fade'
TransitionName of modal, use 'none'
to disable the default transition effect.
String
The class name of the container of the modal dialog.
function
Call when click modal confirm button.
function
Call when click modal mask, top right "x", or cancel button.
function
Specify a function that will be called when modal is closed completely.
Number
1000
The z-index
of the Modal.
CSSProperties
Style of floating layer, typically used at least for adjusting the position.
CSSProperties
Style for modal's mask element.
CSSProperties
Body style for modal body element. Such as height, padding etc.
function
Call before modal open, if return false
, it'll not open.
function
Call when upload failed.
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.
FAQs
best image cropper for Ant Design Upload
We found that antd-cropper-img demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.