native react 图片裁剪_一个基于react的图片裁剪组件示例

开始

写了一年多vue，感觉碰到了点瓶颈，学习下react找找感觉。刚好最近使用vue写了个基于cropperJS的图片裁剪的组件，便花费了几个晚上的功夫用react再写一遍。代码地址

项目是使用create-react-app来开发的，省去了很多webpack配置的功夫，支持eslint，自动刷新等功能，使用前npm install并npm start即可。推荐同样是新学习react的人也用用看。

项目写的比较简陋，自定义配置比较差，不过也是完成了裁剪图片的基本功能，希望可以帮助到初学react和想了解裁剪图片组件的朋友。

组件的结构是这样的。

获取裁剪参数

this.resizeStart(event, 'top')}>

this.resizeStart(event, 'right')}>

this.resizeStart(event, 'bottom')}>

this.resizeStart(event, 'left')}>

this.resizeStart(event, 'right')}>

this.resizeStart(event, 'left')}>

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: {

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.heig