react-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

See the demo in action

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:

• build
• built
• cropstart
• cropmove
• cropend
• crop
• zoom

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

JavaScript Canvas to Blob

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