npm

Share private packages across your team with npm Orgs, now with simplified billing via the aws marketplace!Learn more »

react-cropperjs

1.2.5 • Public • Published

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

install

npm i react-cropperjs

Downloadsweekly downloads

208

version

1.2.5

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability