Component for easy image cropping in react. Demo
npm install react-image-crop-component
Include the main js module:
var ReactImageCrop = require('react-image-crop-component');
// or es6:
import ReactImageCrop from 'react-image-crop-component';
Include the main css:
If you use css compiler. I recommend browserify-css.
require('react-image-crop-component/lib/style.css');
// or es6:
import 'react-image-crop-component/lib/style.css';
Or you can manualy add CSS.
import React, {Component} from 'react';
import {render} from 'react-dom';
import ReactImageCrop from 'react-image-crop-component';
import 'react-image-crop-component/lib/style.css';
class Demo extends Component{
constructor(){
super();
this.onCropped = this._onCropped.bind(this);
}
render(){
return (<div style={{width: "300px", height: "300px"}}>
<ReactImageCrop src="demo.jpg"
setWidth={300}
setHeight={300}
square={false}
resize={true}
border={"dashed #ffffff 2px"}
onCrop={this.onCropped}/>
</div>);
},
_onCropped: function (e) {
let image = e[0];
let image_data = e[1];
}
});
render(<Demo/>, document.getElementById('app'));
Doubleclick on crop box will reset cropping.
<ReactImageCrop src="demo.jpg"/>
You can of course pass a blob path or base64 data.
<ReactImageCrop setWidth={300} src="demo.jpg"/>
You can set cropper element width. Default 100%. (If you have some problems with size in Google Chrome, try to set his value).
<ReactImageCrop setHeight={300} src="demo.jpg"/>
You can set cropper element height. Default 100%. (If you have some problems with size in Google Chrome, try to set his value).
<ReactImageCrop square={true} src="demo.jpg"/>
If true, the selection will have an a square one. Default value is false
<ReactImageCrop resize={true} src="demo.jpg"/>
If true, user can resize cropping element. Default value is true
<ReactImageCrop border={"dashed #ffffff 2px"} src="demo.jpg"/>
You can set crop box border style.
<ReactImageCrop onCrop={this.test} src="demo.jpg"/>
A callback which happens after a resize, drag, or nudge. Passes the current crop state object, as well as a pixel-converted crop for your convenience. Return:
[
imageObject,
{
w: selection width,
h: selection height,
l: selection offsetLeft,
t: selection offsetTop
}
]
src: PropTypes.string,
setWidth: PropTypes.number,
setHeight: PropTypes.number,
square: PropTypes.bool,
resize: PropTypes.bool,
border: PropTypes.string,
onCrop: PropTypes.func