Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jerryshew/react-image-cropper
react image crop
https://github.com/jerryshew/react-image-cropper
image-cropper react
Last synced: 4 months ago
JSON representation
react image crop
- Host: GitHub
- URL: https://github.com/jerryshew/react-image-cropper
- Owner: flyfloor
- License: mit
- Created: 2016-02-17T07:20:30.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-06-26T06:42:38.000Z (about 1 year ago)
- Last Synced: 2024-03-13T14:11:02.890Z (4 months ago)
- Topics: image-cropper, react
- Language: JavaScript
- Homepage: https://braavos.me/react-image-cropper/
- Size: 1.25 MB
- Stars: 175
- Watchers: 6
- Forks: 56
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-react-components - react-image-cropper - React image crop. (UI Components / Form Components)
- awesome-react-components - react-image-cropper - Image cropper. (UI Components / Form Components)
- awesome-react - react-image-cropper - Image cropper.  (UI Components / Form Components)
- awesome-react-components - react-image-cropper - React image crop. (UI Components / Form Components)
- awesome-list - react-image-cropper - React image crop. (Demos / Form Components)
- awesome-react-components - react-image-cropper - Image cropper. (UI Components / Form Components)
- awesome-react-components - react-image-cropper - Image cropper. (UI Components / Form Components)
- awesome-react-components - react-image-cropper - React image crop. (UI Components / Form Components)
- awesome-react-components - react-image-cropper - Image cropper. (UI Components / Form Components)
- awesome-react-components - react-image-cropper - Image cropper. (UI Components / Form Components)
- awesome-react-components - react-image-cropper - Image cropper. (UI Components / Form Components)
- awesome-react-components- - react-image-cropper - Image cropper. (UI Components / Form Components)
- awesome-react-components - react-image-cropper - React image crop. (<summary>UI Components</summary> / Form Components)
- awesome-react-components - react-image-cropper - Image cropper. (UI Components / Form Components)
- fucking-awesome-react-components - react-image-cropper - Image cropper. (UI Components / Form Components)
README
# collaborators wanted
I have barely no time work on improve this project, needs collaborators for project maintenance.
## React Image Cropper
[](https://www.npmjs.com/package/react-image-cropper)
[](https://www.npmjs.com/package/react-image-cropper)
A React.JS Image Cropper
Touch supported
**[See the demo](http://braavos.me/react-image-cropper/)**
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
```
{ 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 |
**[See the demo](http://braavos.me/react-image-cropper/)**