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.
Demo
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;
Quick Example using ES6
;; Component { // image in dataUrl console; } { 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 /> ; }
And for those working in ES5:
var React = ;var CropperJS = ; var Demo = React;
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
;; Component { let dataUrl = thisrefscropper; console; } { return <CropperJS ref='cropper' src='http://i.imgur.com/n483ZwJ.jpg' crop=this_crop /> ; }
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:
;; Component { console; } { console; } { console; } { console; } { console; } { console; } { console; } { 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
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