react-cropper

Cropperjs as React components

Docs

• Image Cropper

Installation

Install via npm

npm install --save ebx-react-cropper

You need cropper.css in your project which is from cropperjs. Since this project has a dependency on cropperjs, it located in /node_modules/react-cropper/node_modules/cropperjs/dist/cropper.css or node_modules/cropperjs/dist/cropper.css for npm version 3.0.0 later

Changelog

1.0.2 - Updated version of cropperjs used from 1.0.0rc3 to 1.4.1

Todo

• Unit test

Quick Example

import React, { Component } from "react";
import Cropper from "react-cropper";
import "cropperjs/dist/cropper.css"; // see installation section above for versions of NPM older than 3.0.0
// If you choose not to use import, you need to assign Cropper to default
// var Cropper = require('react-cropper').default

class Demo extends Component {
  _crop() {
    // image in dataUrl
    console.log(this.refs.cropper.getCroppedCanvas().toDataURL());
  }

  render() {
    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.bind(this)}
      />
    );
  }
}

Options

src

• Type: string
• Default: null

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

alt

• Type: string
• Default: picture

crossOrigin

• Type: string
• Default: null

aspectRatio

https://github.com/fengyuanchen/cropperjs#aspectratio

dragMode

https://github.com/fengyuanchen/cropperjs#dragmode

data

https://github.com/fengyuanchen/cropperjs#setdatadata

scaleX

https://github.com/fengyuanchen/cropperjs#scalexscalex

scaleY

https://github.com/fengyuanchen/cropperjs#scalexscaley

enable

https://github.com/fengyuanchen/cropperjs#enable

disable

https://github.com/fengyuanchen/cropperjs#disable

cropBoxData

https://github.com/fengyuanchen/cropperjs#setcropboxdatadata

canvasData

https://github.com/fengyuanchen/cropperjs#setcanvasdata

zoomTo

https://github.com/fengyuanchen/cropperjs#zoomto

moveTo

https://github.com/fengyuanchen/cropperjs#moveto

rotateTo

https://github.com/fengyuanchen/cropperjs#rotateto

Other options

Accept all options in the docs as properties. Except previously mentioned options, other options don't take effect after the component mounts.

<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

class Demo extends Component {

  _crop(){
    const dataUrl = this.refs.cropper.getCroppedCanvas().toDataURL();
    console.log(dataUrl);
  },

  render() {
    return (
      <Cropper
        ref='cropper'
        crop={this._crop.bind(this)} />
    );
  }
}

Build

npm run build
npm run build-example

Authors

Fong Kuanghuei (fongkuanghui@gmail.com) Andy Neale (andy@echobox.com)

License

MIT