Cropper as React components
Install via npm
npm install --save react-cropper
You also need a couple of loaders for webpack
npm install style-loader css-loader
https://github.com/cheton/browserify-css
npm i --save-dev browserify-css
Compile your project with command line like
browserify -t reactify -g browserify-css index.jsx > bundle.js
If you are using gulp
, browserify
or other build tools, make sure you enable global
option true
For example in gulp
you should do
b.transform(browserifycss, {global: true});
- Unit test
- Put demo in http://roadmanfong.github.io/react-cropper/
var Cropper = require('react-cropper');
var Demo = React.createClass({
_crop: function(){
// image in dataUrl
console.log(this.refs.cropper.getCroppedCanvas().toDataURL());
},
render: function() {
return (
<Cropper
ref='cropper'
src='http://fengyuanchen.github.io/cropper/img/picture.jpg'
style={{height: 400, width: '100%'}}
// Cropper.js options
aspectRatio={16 / 9}
guides={false}
crop={this._crop} />
);
}
});
- Type:
string
- Default:
null
<Cropper src='http://fengyuanchen.github.io/cropper/img/picture.jpg' />
Accept all options in the docs as attributes.
<Cropper
src='http://fengyuanchen.github.io/cropper/img/picture.jpg'
aspectRatio={16 / 9}
guides={false}
crop={this._crop} />
Assign a ref
attribute to use methods
var Demo = React.createClass({
_crop: function(){
var dataUrl = this.refs.cropper.getCroppedCanvas().toDataURL();
console.log(dataUrl);
},
render: function() {
return (
<Cropper
ref='cropper'
crop={this._crop} />
);
}
})
Assign Events handler with .on(eventname, callback)
and ref
.
componentDidMount: function(){
this.refs.cropper.on('dragstart.cropper', function (e) {
console.log(e.type); // dragstart
console.log(e.namespace); // cropper
console.log(e.dragType); // ...
});
},
npm run build
Fong Kuanghuei(waneblade@gmail.com)
MIT