JarCastingreact-cropperjs
A React Component wrapper of cropperjs without jQuery as a dependency. If you want to use jQuery, check out the original project react-cropper.
Demo
Installation
Install via npm
npm install --save react-cropperjs
Webpack User
You also need a couple of loaders for webpack
npm install --save-dev style-loader css-loader
Browserify User
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});
Quick Example using ES6
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} />
);
}
});
Options
src
- Type:
string - Default:
null
<CropperJS src='http://i.imgur.com/n483ZwJ.jpg' />
Other options
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} />
Methods
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.
Callbacks
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.
Build
npm run build
Build example
npm run build-example
Related Projects
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.
License
MIT
