react-image-crop-component

Component for easy image cropping in react. Demo

Install

npm install react-image-crop-component

Usage

Include the main js module:

var ReactImageCrop = require('react-image-crop-component');
// or es6:
import ReactImageCrop from 'react-image-crop-component';

Include the main css:
If you use css compiler. I recommend browserify-css.

require('react-image-crop-component/lib/style.css');
// or es6:
import 'react-image-crop-component/lib/style.css';

Or you can manualy add CSS.

Example

import React, {Component} from 'react';
import {render} from 'react-dom';
import ReactImageCrop from 'react-image-crop-component';
import 'react-image-crop-component/lib/style.css';

class Demo extends Component{
    constructor(){
        super();
        this.onCropped = this._onCropped.bind(this);
    }
    render(){
        return (<div style={{width: "300px", height: "300px"}}>
            <ReactImageCrop src="demo.jpg"
                            setWidth={300} 
                            setHeight={300} 
                            square={false} 
                            resize={true}
                            border={"dashed #ffffff 2px"}
                            onCrop={this.onCropped}/>
        </div>);
    },
    _onCropped: function (e) {
        let image = e[0];
        let image_data = e[1];
    }
});

render(<Demo/>, document.getElementById('app'));

Props

Doubleclick on crop box will reset cropping.

src (REQUIRED, String)

<ReactImageCrop src="demo.jpg"/>

You can of course pass a blob path or base64 data.

setWidth (optional, Number)

<ReactImageCrop setWidth={300} src="demo.jpg"/>

You can set cropper element width. Default 100%. (If you have some problems with size in Google Chrome, try to set his value).

setHeight (optional, Number)

<ReactImageCrop setHeight={300} src="demo.jpg"/>

You can set cropper element height. Default 100%. (If you have some problems with size in Google Chrome, try to set his value).

square (optional, Boolean)

<ReactImageCrop square={true} src="demo.jpg"/>

If true, the selection will have an a square one. Default value is false

resize (optional, Boolean)

<ReactImageCrop resize={true} src="demo.jpg"/>

If true, user can resize cropping element. Default value is true

border (optional, String)

<ReactImageCrop border={"dashed #ffffff 2px"} src="demo.jpg"/>

You can set crop box border style.

onCrop (optional, Function)

<ReactImageCrop onCrop={this.test} src="demo.jpg"/>

A callback which happens after a resize, drag, or nudge. Passes the current crop state object, as well as a pixel-converted crop for your convenience. Return:

  [ 
    imageObject,
    {
        w: selection width,
        h: selection height,
        l: selection offsetLeft,
        t: selection offsetTop
    }
  ]

PropTypes

    src: PropTypes.string,
    setWidth: PropTypes.number,
    setHeight: PropTypes.number,
    square: PropTypes.bool,
    resize: PropTypes.bool,
    border: PropTypes.string,
    onCrop: PropTypes.func

License

Apache License 2.0