react-cropper

Cropper as React components

Docs

Image Cropper

Installation

Before you install react-cropper please make sure npm install jquery --save first or it will install another jquery depedency deep in react-cropper/node_modules/cropper/node_modules/jquery

Install via npm

npm install --save react-cropper

Webpack User

You also need a couple of loaders for webpack

npm install 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});

Todo

Unit test
Put demo in http://roadmanfong.github.io/react-cropper/

Quick Example

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} />
    );
  }
});

Options

src

Type: string
Default: null

  <Cropper src='http://fengyuanchen.github.io/cropper/img/picture.jpg' />

Other options

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} />

Methods

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} />
    );
  }
})

Events

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); // ...
  });
},

Build

npm run build

Author

Fong Kuanghuei(waneblade@gmail.com)

License

MIT

favorit/react-cropper