项目作者: flyfloor

项目描述 :
react image crop
高级语言: JavaScript
项目地址: git://github.com/flyfloor/react-image-cropper.git
创建时间: 2016-02-17T07:20:30Z
项目社区:https://github.com/flyfloor/react-image-cropper

开源协议:MIT License

下载


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

  1. <Cropper
  2. src="http://braavos.me/images/posts/college-rock/the-smiths.png"
  3. ref={ ref => { this.cropper = ref }}
  4. />
  • crop and get image url

image.src = this.cropper.crop()

  • get crop values:

const values = this.cropper.values()

values:

  1. {
  2. // display values
  3. display: {
  4. width, // frame width
  5. height, // frame height
  6. x, // original x position
  7. y, // original y position
  8. imgWidth, // img width
  9. imgHeight, // img height
  10. },
  11. // original values
  12. original: {
  13. width, // frame width
  14. height, // frame height
  15. x, // original x position
  16. y, // original y position
  17. imgWidth, // img width
  18. imgHeight, // img height
  19. }
  20. }
  • 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