获取裁剪参数

ImageUploader & Cropper

ImageUploader主要做的就是上传图片，监听了input的change事件，并调用了父组件Cropper的的handleImgChange方法,该方法设置了绑定到img元素的imageValue，会使得img元素出发load事件。

handleImgChange = e => {

let fileReader = new FileReader()

fileReader.readAsDataURL(e.target.files[0])

fileReader.onload = e => {

this.setState({...this.state, imageValue: e.target.result})

}

}

load事件触发了Cropper的setSize方法，该方法可以设置了图片和裁剪选择框的初始位置和大小。目前裁剪选择框是默认设置是大小为图片的80%，中间显示。

setSize = () => {

let img = this.refs.img

let widthNum = parseInt(this.props.width, 10)

let heightNum = parseInt(this.props.height, 10)

this.setState({

...this.state,

naturalSize:EPPtHnOEI {

width: img.naturalWidth,

height: img.naturalHeight

}

})

let imgStyle = img.style

imgStyle.height = 'auto'

imgStyle.width = 'auto'

let principalStyle = ReactDOM.findDOMNode(this.refs.selectArea).parentElement.style

const ratio = img.width / img.height

// 设置图片大小、位置

if (img.width > img.height) {

imgStyle.width = principalStyle.width = this.props.width

imgStyle.height = principalStyle.height = widthNum / ratio + 'px'

principalStyle.marginTop = (widthNum - parseInt(principalStyle.height, 10)) / 2 + 'px'

principalStyle.marginLeft = 0

} else {

imgStyle.height = principalStyle.height = this.props.height

imgStyle.width = principalStyle.width = heightNum * ratio + 'px'

principalStyle.marginLeft = (heightNum - parseInt(principalStyle.width, 10)) / 2 + 'px'

principalStyle.marginTop = 0

}

// 设置选择框样式

let selectAreaStyle = ReactDOM.findDOMNode(this.refs.selectArea).style

let principalHeight = parseInt(principalStyle.height, 10)

let principalWidth = parseInt(principalStyle.width, 10)

if (principalWidth > principalHeight) {

selectAreaStyle.top = principalHeight * 0.1 + 'px'

selectAreaStyle.width = selectAreaStyle.height = principalHeight * 0.8 + 'px'

selectAreaStyle.left = (principalWidth - parseInt(selectAreaStyle.width, 10)) / 2 + 'px'

} else {

selectAreaStyle.left = principalWidth * 0.1 + 'px'

selectAreaStyle.width = selectAreaStyle.height = principalWidth * 0.8 + 'px'

selectAreaStyle.top = (principalHeight - parseInt(selectAreaStyle.height, 10)) / 2 + 'px'

}

}

Cropper上还有一个getCropData方法，方法会打印并返回裁剪参数,

getCropData = e => {

e.preventDefault()

let SelectArea = ReactDOM.findDOMNode(this.refs.selectArea).style

let a = {

width: parseInt(SelectArea.width, 10),

height: parseInt(SelectArea.height, 10),

left: parseInt(SelectArea.left, 10),

top: parseInt(SelectArea.top, 10)

}

a.radio = this.state.naturalSize.width / a.width

console.log(a)

return a

}

SelectArea

重新放一遍selectArea的结构。要注意，.top-resize的cursor属性是 n-resize，而和left，right，bottom对应的分别是w-resize，e-resize，s-resize

selectArea的state值设为这样，selectArea保存拖拽选择框时的参数，resizeArea保存裁剪选择框时的参数，container为.image-principal元素，el为触发事件时的event.target。

this.state = {

selectArea: null,

el: null,

container: null,

resizeArea: null

}

拖拽选择框

在.select-area按下鼠标，触发mouseDown事件，调用dragStart方法。

使用method = e => {}的形式可以避免在jsx中使用this.method.bind(this)

在这个方法中，首先保存按下鼠标时的鼠标位置，裁剪框与图片的相对距离和裁剪框的最大位移距离，接着添加事件监听

dragStart = e => {

const el = e.target

const container = this.state.container

let selectArea = {

posLeft: e.clientX,

posTop: e.clientY,

left: e.clientX - el.offsetLeft,

top: e.clientY - el.offsetTop,

maxMoveX: container.offsetWidth - el.offsetWidth,

maxMoveY: container.offsetHeight - el.offsetHeight,

}

this.setState({ ...this.state, selectArea, el})

document.addEventListener('mousemove', this.moveBind, false)

{{title}}