1.0.0 • Published 1 year ago

react-image-cropper2 v1.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

collaborators wanted

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

NOTE: This is a fork/based from https://github.com/flyfloor/react-image-cropper primarily to fix security issues within it's dependencies.

React Image Cropper 2

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-cropper2'

  • 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
propvalue
ratiowidth / height
widthcropper frame width
heightcropper frame height
originXcropper original position(x axis), accroding to image left
originYcropper original position(Y axis), accroding to image top
fixedRatioturn on/off fixed ratio (bool default true)
allowNewSelectionallow user to create a new selection instead of reusing initial selection (bool default true)
stylesspecify styles to override inline styles
onImgLoadspecify fuction callback to run when the image completed loading
beforeImgloadspecify function callback to run when the image size value is ready but image is not completed loading
onChangetriggred when dragging stop, get values of cropper

See the demo