Branch: master
Clone or download
Latest commit 90d07aa May 7, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
component fix lint error Jan 30, 2018
demo fixes #28 The imgWidth of values is not actual width of image after c… Jan 29, 2018
dist fixes #24 demo image broken Dec 9, 2017
lib fix lint error Jan 30, 2018
.babelrc update webpack config and package version Aug 10, 2017
.eslintrc.js add lint Jan 29, 2018
.gitignore remove originalOriginX Apr 8, 2017
.jshintrc fix module exports Mar 24, 2016
LICENSE init Feb 17, 2016
README.md Update README.md May 7, 2018
index.html link Mar 6, 2016
index.js fix module exports Mar 24, 2016
package-lock.json 1.3.0 Jan 30, 2018
package.json 1.3.0 Jan 30, 2018
server.js demo Mar 24, 2016
webpack.config.js fixes #24 Demo page not working Dec 9, 2017

README.md

collaborators wanted

I have barely no time work on improve this project, needs collaborators for project maintenance.

React Image Cropper

Downloads Version

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