Popularity
2.2
Stable
Activity
0.0
Stable
167
6
54
Monthly Downloads: 0
Programming language: JavaScript
License: MIT License
react-image-cropper alternatives and similar libraries
Based on the "Image Editing" category
-
react-avatar-editor
Facebook like, avatar / profile picture component. Resize and crop your uploaded image using a clear user interface. -
react-image-crop
A responsive image cropping tool for React. -
react-avatar-cropper
Aiming to be a complete solution for avatar cropping in react.
Do you think we are missing an alternative of react-image-cropper or a related project?
README
collaborators wanted
I have barely no time work on improve this project, needs collaborators for project maintenance.
React Image Cropper
A React.JS Image Cropper Touch supported
Custom:
- initial cropper frame position
- frame width, height, ratio
- crop event
Hot to Use
import {Cropper} from '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 |
|---|---|
| ratio | width / height |
| width | cropper frame width |
| height | cropper frame height |
| originX | cropper original position(x axis), accroding to image left |
| originY | cropper original position(Y axis), accroding 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 |
| onImgLoad | specify fuction callback to run when the image completed loading |
| beforeImgload | specify function callback to run when the image size value is ready but image is not completed loading |
| onChange | triggred when dragging stop, get values of cropper |