这次给大家带来react怎样对图片进行裁剪,react对图片进行裁剪的注意事项有哪些,下面就是实战案例,一起来看一下。

开始

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

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

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

组件的结构是这样的。

<!--Cropper--> <p> <ImageUploader handleImgChange={this.handleImgChange} getCropData={this.getCropData}/> <p className="image-principal"> <img src={this.state.imageValue} alt="" className="img" ref="img" onLoad={this.setSize}/> <SelectArea ref="selectArea"></SelectArea> </p> </p> <!--ImageUploader --> <form className="image-upload-form" method="post" encType="multipart/form-data" > <input type="file" name="inputOfFile" ref="imgInput" id="imgInput" onChange={this.props.handleImgChange}/> <button onClick={this.props.getCropData}>获取裁剪参数</button> </form> <!--SelectArea --> <p className="select-area" onMouseDown={ this.dragStart} ref="selectArea" > <p className="top-resize" onMouseDown={ event => this.resizeStart(event, 'top')}></p> <p className="right-resize" onMouseDown={ event => this.resizeStart(event, 'right')}></p> <p className="bottom-resize" onMouseDown={ event => this.resizeStart(event, 'bottom')}></p> <p className="left-resize" onMouseDown={ event => this.resizeStart(event, 'left')}></p> <p className="right-bottom-resize" onMouseDown={ event => this.resizeStart(event, 'right')}></p> <p className="left-top-resize" onMouseDown={ event => this.resizeStart(event, 'left')}></p> </p>

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