A React Component wrapper of cropperjs without jQuery as a dependency. If you want to use jQuery, check out the original project react-cropper.
We forked the original repository because it is no longer maintained. Currently we don't plan to add new features, just to keep the dependencies up to date.
Install via npm
npm install --save react-cropperjsYou also need a couple of loaders for webpack
npm install --save-dev style-loader css-loaderhttps://github.com/cheton/browserify-css
npm i --save-dev browserify-cssCompile your project with command line like
browserify -t reactify -g browserify-css index.jsx > bundle.jsIf 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});import React from 'react';
import CropperJS from 'react-cropperjs';
class Demo extends React.Component {
_crop(){
// image in dataUrl
console.log(this.refs.cropper.getCroppedCanvas().toDataURL());
}
render() {
return (
<CropperJS
ref='cropper'
src='http://i.imgur.com/n483ZwJ.jpg'
style={{height: 400, width: '100%'}}
// Cropper.js options
aspectRatio={16 / 9}
guides={false}
crop={this._crop.bind(this)} />
);
}
}And for those working in ES5:
var React = require('react');
var CropperJS = require('react-cropperjs');
var Demo = React.createClass({
_crop: function() {
// image in dataUrl
console.log(this.refs.cropper.getCroppedCanvas().toDataURL());
},
render: function() {
return (
<CropperJS
ref='cropper'
src='http://i.imgur.com/n483ZwJ.jpg'
style={{height: 400, width: '100%'}}
// Cropper.js options
aspectRatio={16 / 9}
guides={false}
crop={this._crop} />
);
}
});- Type:
string - Default:
null
<CropperJS src='http://i.imgur.com/n483ZwJ.jpg' />Accepts all options available in cropperjs as attributes. See docs.
<CropperJS
src='http://i.imgur.com/n483ZwJ.jpg'
aspectRatio={16 / 9}
guides={false}
crop={this._crop} />Assign a ref attribute to use methods
import React from 'react';
import CropperJS from 'react-cropperjs';
class Demo extends React.Component {
_crop() {
let dataUrl = this.refs.cropper.getCroppedCanvas().toDataURL();
console.log(dataUrl);
}
render () {
return (
<CropperJS
ref='cropper'
src='http://i.imgur.com/n483ZwJ.jpg'
crop={this._crop.bind(this)} />
);
}
}React.createClass has a built-in magic feature that binds all methods to this automatically for you. When using ES6 syntax, remember to pre-bind in the constructor or in the attribute (as shown in the above example). Otherwise See [autobinding](https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1. html#autobinding) docs for more details.
Unlike cropper, cropperjs doesn't support events, it supports the following callbacks:
import React from 'react';
import CropperJS from 'react-cropperjs';
class CallbackDemo extends React.Component {
_build() {
console.log('_build');
}
_built() {
console.log('_built');
}
_cropstart(data) {
console.log('_cropstart', data.action);
}
_cropmove(data) {
console.log('_cropmove', data.action);
}
_cropend(data) {
console.log('_cropend', data.action);
}
_zoom(data) {
console.log('_zoom', data.ratio);
}
_crop(data) {
console.log('_crop', data);
}
render() {
return (
<CropperJS
ref='cropper'
src='http://i.imgur.com/n483ZwJ.jpg'
build={this._build}
built={this._built}
cropstart={this._cropstart}
cropmove={this._cropmove}
cropend={this._cropend}
zoom={this._zoom}
crop={this._crop} />
);
}
}Remember to bind this in the attributes or pre-bind constructor if you're going to be accessing this in the callback methods.
npm run build
Build example
npm run build-example
A lot of times, you'll get a canvas element drawn with the cropped image and will need to upload it to the server.
You can use canvas.toDataURL to get a Data URL, or use canvas.toBlob to get a blob and upload it to server with FormData if the browser supports these APIs.
MIT