Popularity
3.2
Stable
Activity
0.0
Stable
174
6
55
Monthly Downloads: 0
Programming language: JavaScript
License: MIT License
Latest version: v1.3
react-image-cropper alternatives and similar libraries
Based on the "Image Editing" category.
Alternatively, view react-image-cropper alternatives based on common mentions on social networks and blogs.
-
react-image-crop
A responsive image cropping tool for React -
react-avatar-editor
Small avatar & profile picture component. Resize and crop uploaded images using a intuitive user interface. -
react-avatar-cropper
Aiming to be a complete solution for avatar cropping in react.
Appwrite - The Open Source Firebase alternative introduces iOS support
Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!
Promo
appwrite.io
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 |