react-cropperjs

Cropper as a React component

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-cropperjs
1.2.57 years ago8 years agoMinified + gzip package size for react-cropperjs in KB

Readme

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.
NPM

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

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