component/Cropper.js
// frame width, frame height, position left, position top
frame width, frame height, position left, position top
frame width frame height position left position top
calcPosition (width, height, left, top, callback) {
    const {
      imgWidth,
      imgHeight
    } = this.state
    const {
      ratio,
      fixedRatio
    } = this.props
    if (width < 0 || height < 0) return false
    if (fixedRatio) {
      if (width / imgWidth > height / imgHeight) {
        if (width > imgWidth) {
          width = imgWidth
          left = 0
          height = width / ratio
        }
      } else {
        if (height > imgHeight) {
          height = imgHeight
          top = 0
          width = height * ratio
        }
      }
    }
    if (width + left > imgWidth) {
      if (fixedRatio) {
        left = imgWidth - width
      } else {
        width = width - ((width + left) - imgWidth)
      }
    }
    if (height + top > imgHeight) {
      if (fixedRatio) {
        top = imgHeight - height
      } else {
        height = height - ((height + top) - imgHeight)
      }
    }
    if (left < 0) {
      left = 0
    }
    if (top < 0) {
      top = 0
    }
    if (width > imgWidth) {
      width = imgWidth
    }
    if (height > imgHeight) {
      height = imgHeight
    }
    this.setState({
      toImgLeft4Style: left,
      toImgTop4Style: top,
      frameWidth4Style: width,
      frameHeight4Style: height
    }, () => {
      if (callback) callback()
    })
  }
calcPosition ( width , height , left , top , callback ) { const { imgWidth , imgHeight } = this . state const { ratio , fixedRatio } = this . props if ( width < 0 || height < 0 ) return false if ( fixedRatio ) { if ( width / imgWidth > height / imgHeight ) { if ( width > imgWidth ) { width = imgWidth left = 0 height = width / ratio } } else { if ( height > imgHeight ) { height = imgHeight top = 0 width = height * ratio } } } if ( width + left > imgWidth ) { if ( fixedRatio ) { left = imgWidth - width } else { width = width - ( ( width + left ) - imgWidth ) } } if ( height + top > imgHeight ) { if ( fixedRatio ) { top = imgHeight - height } else { height = height - ( ( height + top ) - imgHeight ) } } if ( left < 0 ) { left = 0 } if ( top < 0 ) { top = 0 } if ( width > imgWidth ) { width = imgWidth } if ( height > imgHeight ) { height = imgHeight } this . setState ( { toImgLeft4Style : left , toImgTop4Style : top , frameWidth4Style : width , frameHeight4Style : height } , ( ) => { if ( callback ) callback ( ) } ) }
frame width, frame height, position left, position top
frame width frame height position left position top
// width < 0 or height < 0, frame invalid // if ratio is fixed // adjust by width // adjust by height // frame width plus offset left, larger than img's width // if fixed ratio, adjust left with width // resize width with left // frame heigth plust offset top, larger than img's height // if fixed ratio, adjust top with height // resize height with top // left is invalid // top is invalid // if frame width larger than img width // if frame height larger than img height