react-cropper

Cropperjs as React components


Demo

Docs

* Image Cropper

Installation

Install via npm

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

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

const cropper = React.createRef(null);

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

render() {
return (
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

$3


* Type: string
* Default: null

`js

`


$3


* Type: string
* Default: picture

$3

* Type: string
* Default: null

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

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

`js

const cropper = React.createRef(null);

class Demo extends Component {

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

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

Build

`
npm run build
npm run build-example
``

Author

Fong Kuanghuei(fongkuanghui@gmail.com)

License

MIT