react-image-crop-component

Component for easy image cropping in react. Demo

Install

yarn add react-image-crop-component

Or with npm:

npm install react-image-crop-component --save

Usage

Include the main js module:

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

Include the styles:

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

Example

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

class Demo extends Component{
    constructor(){
        super()
        this.onCropped = this._onCropped.bind(this)
    }
    render(){
        return (<div style={{width: "300px", height: "300px"}}>
            <ImageCrop 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.image
        let image_data = e.data
    }
});

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

Props

Name | Type | Description --- | --- | --- src | string | Mouse event with contains cursor position maxWidth | string | HTML node element maxHeight | string | HTML node element square | boolean | HTML node element watch | Function | Called on crop onCrop | Function | Called when crop action was finished onReset | Function | Called when crop box reset

src (REQUIRED, String)

<ImageCrop src="demo.jpg"/>

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

maxWidth (optional, String)

<ImageCrop maxWidth='300px' src='demo.jpg'/>

Max width of crop component. Default script will try to set max width 100%. But if You have some problem with sizing, provide this value.

maxHeight (optional, String)

<ImageCrop maxHeight='300px' src='demo.jpg'/>

Max width of crop component. Default script will try to set max width 100%. But if You have some problem with sizing, provide this value.

square (optional, boolean)

<ImageCrop square={true} src='demo.jpg'/>

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

watch (optional, Function)

<ImageCrop watch={this.watch} src='demo.jpg'/>

A callback called continuously when user crop or drag cropping block. Return object:

{
  image: base64,
  data: {
    x number,
    y number,
    width number,
    height number,
  }
}

onCrop (optional, Function)

<ImageCrop onCrop={this.onCrop} src='demo.jpg'/>

A callback called when resize or drag event ended. Passes the current crop state object, as well as a pixel-converted crop for your convenience. Return the same object as in watch

onReset (optional, Function)

<ImageCrop onReset={this.onReset} src='demo.jpg'/>

This callback will be called when crop will be zero.

What's new

v1.1.2

- updated all dependencies;
- added flow types;
- added eslint;
- moved to Babel 7 for compiling;
- removed gulp;
- rewrite part of code;

License

Apache License 2.0