react-cropper
Cropperjs as React components
Docs
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
;;; // 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 { // image in dataUrl console; } { 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 /> ; }
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
{ const dataUrl = thisrefscropper; console; } { return <Cropper ref='cropper' crop=this_crop /> ; }
Build
npm run build
npm run build-example
Authors
Fong Kuanghuei (fongkuanghui@gmail.com) Andy Neale (andy@echobox.com)
License
MIT