<强>开始
写了一年多,vue感觉碰到了点瓶颈,学习下反应找找感觉。刚好最近使用vue写了个基于cropperJS的图片裁剪的组件,便花费了几个晚上的功夫用反应再写一遍。代码地址
项目是使用create-react-app来开发的,省去了很多webpack配置的功夫,支持eslint,自动刷新等功能,使用前npm安装并npm开始即可。推荐同样是新学习的反应的人也用用看。
项目写的比较简陋,自定义配置比较差,不过也是完成了裁剪图片的基本功能,希望可以帮助到初学反应和想了解裁剪图片组件的朋友。
组件的结构是这样的。
& lt;/div>
& lt;/div>
& lt; !——ImageUploader祝辞
& lt;形式className=" image-upload-form " method=" post " encType=岸嗖糠?格式”比;
& lt;输入类型="文件" name=" inputOfFile " ref=" imgInput " id=癷mgInput”比;
& lt; div className=" top-resize ">
handleImgChange=e=比;{
让fileReader=new fileReader ()
fileReader.readAsDataURL (e.target.files [0])
fileReader。onload=e=比;{
this.setState ({……。状态,imageValue: e.target.result})
}
}
之前
=()=setSize祝辞{
让img=this.refs.img
让widthNum=方法(this.props。宽度,10)
让heightNum=方法(this.props。高度,10)
this.setState ({
……this.state,
naturalSize: {
宽度:img.naturalWidth,
高度:img.naturalHeight
}
}）
让imgStyle=img.style
imgStyle。身高='汽车'
imgStyle。宽度='汽车'
让principalStyle=ReactDOM.findDOMNode .parentElement.style (this.refs.selectArea)
const比率=img。宽/img.height//设置图片大小,位置
如果(img。宽度比;img.height) {
imgStyle。宽度=principalStyle。宽度=this.props.width
imgStyle。身高=principalStyle。身高=widthNum/比例+“px”
principalStyle。marginTop=(widthNum -方法(principalStyle。高度,10))/2 +“px”
principalStyle。marginLeft=0
其他}{
imgStyle。身高=principalStyle。身高=this.props.height
imgStyle。宽度=principalStyle。宽度=heightNum *比例+“px”
principalStyle。marginLeft=(heightNum -方法(principalStyle。宽度,10))/2 +“px”
principalStyle。marginTop=0
}//设置选择框样式
让selectAreaStyle=ReactDOM.findDOMNode .style (this.refs.selectArea)
让principalHeight=方法(principalStyle。高度,10)
让principalWidth=方法(principalStyle。宽度,10)
如果(principalWidth比;principalHeight) {
selectAreaStyle。顶级=principalHeight * 0.1 +“px”
selectAreaStyle。宽度=selectAreaStyle。身高=principalHeight * 0.8 +“px”
selectAreaStyle。左=(principalWidth -方法(selectAreaStyle。宽度,10))/2 +“px”
其他}{
selectAreaStyle。左=principalWidth * 0.1 +“px”
selectAreaStyle。宽度=selectAreaStyle。身高=principalWidth * 0.8 +“px”
selectAreaStyle。顶级=(principalHeight -方法(selectAreaStyle。高度,10))/2 +“px”
}
}
之前
getCropData=https://www.yisu.com/zixun/e=> {
e.preventDefault ()
让SelectArea=ReactDOM.findDOMNode .style (this.refs.selectArea)
让一个={
宽度:方法(SelectArea。宽度、10)
高度:方法(SelectArea。高度、10)
左:方法(SelectArea。离开,10),
上图:方法(SelectArea。,10)
}
一个。无线电=this.state.naturalSize。宽/a.width
console.log (a)
返回一个
}
之前
& lt; div className=把≡馻rea”比;
& lt; div className=" top-resize ">
这一点。状态={
selectArea:空,
艾尔:空,
容器:空,
resizeArea:零
}
加载事件触发了收割机setSize的方法,该方法可以设置了图片和裁剪选择框的初始位置和大小。目前裁剪选择框是默认设置是大小为图片的80%,中间显示。
收割机上还有一个getCropData方法,方法会打印并返回裁剪参数,
<强> SelectArea
重新放一遍selectArea的结构。要注意,。top-resize的光标属性是n-resize,而和左,右,下对应的分别是w-resize, e-resize, s-resize
