@bearcanrun/react-image-cropper
v1.3.6
Published
react image crop
Downloads
10
Maintainers
Readme
Forked from original React Image Cropper
Package no longer seemed to be maintained and required upgrading of package npm-run-all from critical security vulnerability. Also merged in LiHuang2's react16update branch. Upgraded to Webpack 4.
React Image Cropper
A React.JS Image Cropper Touch supported
Custom:
- initial cropper frame position
- frame width, height, ratio
- crop event
How to Use
import Cropper from '@bearcanrun/react-image-cropper'
styles are all inline
define Cropper with src, and ref to execute crop method
<Cropper
src="http://braavos.me/images/posts/college-rock/the-smiths.png"
ref={ ref => { this.cropper = ref }}
/>
- crop and get image url
image.src = this.cropper.crop()
- get crop values:
const values = this.cropper.values()
values:
{
// display values
display: {
width, // frame width
height, // frame height
x, // original x position
y, // original y position
imgWidth, // img width
imgHeight, // img height
},
// original values
original: {
width, // frame width
height, // frame height
x, // original x position
y, // original y position
imgWidth, // img width
imgHeight, // img height
}
}
- onChange for preview
(values) => onChange(values)
- custom use
| prop | value | |:-------:|:--------| | rate | width / height | | disabled | boolean | | width | cropper frame width | | height | cropper frame height | | originX | cropper original position(x axis), according to image left | | originY | cropper original position(Y axis), according to image top | | fixedRatio | turn on/off fixed ratio (bool default true) | | allowNewSelection | allow user to create a new selection instead of reusing initial selection (bool default true) | | styles | specify styles to override inline styles | | imageLoaded | specify function callback to run when the image completed loading | | beforeImageLoaded | specify function callback to run when the image size value is ready but the image has not completed loading | | imageLoadError | specify function callback to run when the image errors during loading | | onDragStop | specify function callback to run when dragging the crop has ended |