React Image Cropper

A React.JS Image Cropper Touch supported

See the demo

Custom:

• initial cropper frame position
• frame width, height, ratio
• crop event

Hot to Use

• import {Cropper} from 'react-image-cropper'

• styles are all inline

• define Cropper with src, and ref to execute crop method

<Cropper 
    src="http://braavos.me/images/posts/college-rock/the-smiths.png" 
    ref={ ref => { this.cropper = ref }}
/>

• crop and get image url

image.src = this.cropper.crop()

• get crop values:

const values = this.cropper.values()

values:

{
    // display values
    display: {
        width, // frame width
        height, // frame height
        x, // original x position
        y, // original y position
        imgWidth, // img width
        imgHeight, // img height
    },
    // original values
    original: {
        width, // frame width
        height, // frame height
        x, // original x position
        y, // original y position
        imgWidth, // img width
        imgHeight, // img height
    }
}

• onChange for preview

(values) => onChange(values)

• custom use

| prop | value | |:-------:|:--------| | ratio | width / height | | width | cropper frame width | | height | cropper frame height | | originX | cropper original position(x axis), accroding to image left| | originY | cropper original position(Y axis), accroding to image top| | fixedRatio | turn on/off fixed ratio (bool default true) | | allowNewSelection | allow user to create a new selection instead of reusing initial selection (bool default true) | | styles | specify styles to override inline styles | | onImgLoad | specify fuction callback to run when the image completed loading | | beforeImgload | specify function callback to run when the image size value is ready but image is not completed loading | | onChange | triggred when dragging stop, get values of cropper |

See the demo