react-cropper

Cropper as React components

Currently only support webpack

Docs

Image Cropper

Installation

Install via npm

npm install --save react-cropper

You also need a couple of loaders for webpack

npm install style-loader css-loader

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

jasonvillalon/react-cropper