Popularity
3.2
Stable
Activity
0.0
Stable
175
6
56
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-avatar-editor
Small avatar & profile picture component. Resize and crop uploaded images using a intuitive user interface. -
React Profile
React Profile Editor, crop, upload, apply filters and adjust colors for your avatar image. Optimize the image size for your application
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
Promo
surveyjs.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 |