react-cropper

Cropperjs as React components

Demo

Docs

• Image Cropper

Installation

Install via npm

npm install --save react-cropper

You need cropper.css in your project which is from cropperjs. Since this project have 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

Todo

• Unit test

Quick Example

importReact,{Component}from'react';importCropperfrom'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').defaultclassDemoextendsComponent{_crop(){// image in dataUrlconsole.log(this.refs.cropper.getCroppedCanvas().toDataURL());}render(){return(<Cropperref='cropper'src='http://fengyuanchen.github.io/cropper/img/picture.jpg'style={{height: 400,width: '100%'}}// Cropper.js optionsaspectRatio={16/9}guides={false}crop={this._crop.bind(this)}/>);}}

Options

src

• Type: string
• Default: null

<Croppersrc='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 previous mentioned options, other options don't take effect after component mount.

<Croppersrc='http://fengyuanchen.github.io/cropper/img/picture.jpg'aspectRatio={16/9}guides={false}crop={this._crop}/>

Methods

Assign a ref attribute to use methods

classDemoextendsComponent{_crop(){constdataUrl=this.refs.cropper.getCroppedCanvas().toDataURL();console.log(dataUrl);},render(){return(<Cropperref='cropper'crop={this._crop.bind(this)}/>);}}

Build

npm run build
npm run build-example

Author

Fong Kuanghuei(fongkuanghui@gmail.com)

License

MIT