好资源导航 » 文章资讯 » 一个基于react的图片裁剪组件示例

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

2023-09-14 01:33:05 57

开始

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

项目是使用create-react-app来开发的，省去了很多webpack配置的功夫，支持eslint，自动刷新等功能，使用前npminstall并npmstart即可。推荐同样是新学习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=>{
letfileReader=newFileReader()
fileReader.readAsDataURL(e.target.files[0])
fileReader.onload=e=>{
this.setState({...this.state,imageValue:e.target.result})
}
}

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

setSize=()=>{
letimg=this.refs.img
letwidthNum=parseInt(this.props.width,10)
letheightNum=parseInt(this.props.height,10)
this.setState({
...this.state,
naturalSize:{
width:img.naturalWidth,
height:img.naturalHeight
}
})
letimgStyle=img.style
imgStyle.height='auto'
imgStyle.width='auto'
letprincipalStyle=ReactDOM.findDOMNode(this.refs.selectArea).parentElement.style
constratio=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
}
//设置选择框样式
letselectAreaStyle=ReactDOM.findDOMNode(this.refs.selectArea).style
letprincipalHeight=parseInt(principalStyle.height,10)
letprincipalWidth=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()
letSelectArea=ReactDOM.findDOMNode(this.refs.selectArea).style

leta={
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)
returna
}

SelectArea

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


this.resizeStart(event,'top')}>
this.resizeStart(event,'right')}>
this.resizeStart(event,'bottom')}>
this.resizeStart(event,'left')}>
this.resizeStart(event,'right')}>
this.resizeStart(event,'left')}>

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=>{
constel=e.target
constcontainer=this.state.container
letselectArea={
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)
document.addEventListener('mouseup',this.stopBind,false)
}

moveBind和stopBind来自于

this.moveBind=this.move.bind(this)
this.stopBind=this.stop.bind(this)

move方法,在鼠标移动中根据记录新的鼠标位置来计算新的相对位置newPosLeft和newPosTop,并控制该值在合理范围内

move(e){
if(!this.state||!this.state.el||!this.state.selectArea){
return
}
letselectArea=this.state.selectArea
letnewPosLeft=e.clientX-selectArea.left
letnewPosTop=e.clientY-selectArea.top
//控制移动范围
if(newPosLeft<=0){
newPosLeft=0
}elseif(newPosLeft>selectArea.maxMoveX){
newPosLeft=selectArea.maxMoveX
}
if(newPosTop<=0){
newPosTop=0
}elseif(newPosTop>selectArea.maxMoveY){
newPosTop=selectArea.maxMoveY
}
letelStyle=this.state.el.style
elStyle.left=newPosLeft+'px'
elStyle.top=newPosTop+'px'
}

stop方法，移除事件监听，清除state,避免方法错误调用

stop(){
document.removeEventListener('mousemove',this.moveBind,false)
document.removeEventListener('mousemove',this.resizeBind,false)
document.removeEventListener('mouseup',this.stopBind,false)
this.setState({...this.state,el:null,resizeArea:null,selectArea:null})
}

裁剪选择框

跟拖拽一样，首先调用resizeStart方法，保存开始裁剪的鼠标位置，裁剪框的尺寸和位置，添加关于resizeBind和stopBind的事件监听，注意，由于react的事件机制特点，需要使用stopPropagation来禁止事件冒泡，事件监听的第三个参数使用false是无效的。

resizeStart=(e,type)=>{
e.stopPropagation()
constel=e.target.parentElement
letresizeArea={
posLeft:e.clientX,
posTop:e.clientY,
width:el.offsetWidth,
height:el.offsetHeight,
left:parseInt(el.style.left,10),
top:parseInt(el.style.top,10)
}
this.setState({...this.state,resizeArea,el})
this.resizeBind=this.resize.bind(this,type)
document.addEventListener('mousemove',this.resizeBind,false)
document.addEventListener('mouseup',this.stopBind,false)
}

裁剪的方法，将裁剪分为两种情况，一种是右侧，下侧和右下侧的拉伸。另一种是左侧，上侧和左上侧的拉伸。

第一种情况下，选择框的位置是不会变的，只有尺寸会变，处理起来相对简单。新的尺寸大小为原大小加上当前的鼠标的位置再减去开始拖拽处的鼠标的位置，如果宽度或者高度有一个超标了，则将尺寸设置为刚好到边界的大小。均为超标，设置为新的尺寸。

第二种情况下，选择框的位置和大小同时会变，要同时控制尺寸和位置不超出边界。

resize(type,e){
if(!this.state||!this.state.el||!this.state.resizeArea){
return
}
letcontainer=this.state.container
constcontainerHeight=container.offsetHeight
constcontainerWidth=container.offsetWidth
constcontainerLeft=parseInt(container.style.left||0,10)
constcontainerTop=parseInt(container.style.top||0,10)
letresizeArea=this.state.resizeArea
letel=this.state.el
letelStyle=el.style
if(type==='right'||type==='bottom'){
letlength
if(type==='right'){
length=resizeArea.width+e.clientX-resizeArea.posLeft
}else{
length=resizeArea.height+e.clientY-resizeArea.posTop
}
if(parseInt(el.style.left,10)+length>containerWidth||parseInt(el.style.top,10)+length>containerHeight){
constw=containerWidth-parseInt(el.style.left,10)
consth=containerHeight-parseInt(el.style.top,10)
elStyle.width=elStyle.height=Math.min(w,h)+'px'
}else{
elStyle.width=length+'px'
elStyle.height=length+'px'
}
}else{
letposChange
letnewPosLeft
letnewPosTop
if(type==='left'){
posChange=resizeArea.posLeft-e.clientX
}else{
posChange=resizeArea.posTop-e.clientY
}
newPosLeft=resizeArea.left-posChange
//防止过度缩小
if(newPosLeft>resizeArea.left+resizeArea.width){
elStyle.left=resizeArea.left+resizeArea.width+'px'
elStyle.top=resizeArea.top+resizeArea.height+'px'
elStyle.width=elStyle.height='2px'
return
}
newPosTop=resizeArea.top-posChange
//到达边界
if(newPosLeft<=containerLeft||newPosTop
结束
通过这些组件的编写，感觉想要学好react，需要加深对this和事件模型的了解，这几天在这上面踩了不少的坑。如果觉得这篇文章有帮助的话，欢迎star我的项目


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
                
            
              
            
                                    上一篇
Java 无参数构造函数的应用
                
                                    下一篇
原生js实现拖拽功能基本思路详解
                            
            
            
                     
                热门推荐 
                                        1 毛坯房验收经验和常识 看了之后再验房心里有底  
                                        2 二手房收房如何交接 二手房收房注意问题  
                                        3 专业验收毛坯房的价格 商品房验收合格的标准  
                                        4 精装房怎么验收 精装房请验房师有用吗  
                                        5 一般要到哪里找验房师 验房师有哪些作用呢  
                                        6 请人验房一般是多少钱 验房师费用是多少  
                                        7 怎样测量房子面积 建筑面积和使用面积怎么算  
                                        8 收房需要注意什么 仔细检查不松懈  
                                        9 收房时三书一证一表是什么 主要作用介绍  
                                        10 交房时交房税费有哪些 本文为你一一讲解  
                                        11 验房都需要验什么 要做哪些准备呢  
                                        12 毛坯房验房师有必要请吗 毛坯房装修完如何验收  
                                        13 地下室防水工程质量验收规范详解  
                                        14 水性涂料、油性涂料区别介绍  
                                        15 零基础布艺DIY工坊 教你做超萌猫头鹰钥匙包  
                                        16 三棵树漆怎么样？三棵树漆官方网站  
                                        17 家庭“装修套餐”中猫腻你知道吗？  
                                        18 小空间大浴望 卫浴间装修巧支招  
                     
            
            
                
                
                
            
        
        
        
            
                随机推荐
                
                                            
                            冷空气是怎么形成的 中东部地区冷气效果即将拉满
                        
                                            
                            韦编三绝的意思 韦编三绝是什么意思
                        
                                            
                            洛神赋原文 洛神赋作者是谁
                        
                                            
                            破天荒造句 用破天荒造句示例
                        
                                            
                            公积金怎么用人脸登录识别
                        
                                            
                            2023高考作文题目 全国各试卷类型作文题目
                        
                                            
                            recp有哪些国家 recp的介绍
                        
                                            
                            中国第一颗原子弹爆炸什么时候
                        
                                            
                            月光石的功效及作用 月光石有什么特性
                        
                                            
                            最经典的现代诗 这五首很有代表性
                        
                                            
                            用什么钓鲫鱼 鲫鱼的钓法常识
                        
                                            
                            如何在家炒熟松子
                        
                                            
                            绿色联盟是做什么的
                        
                                            
                            酸枣仁的功效与作用及食用方法 大家可以了解一下
                        
                                            
                            鸡蛋清怎么做面膜 下面一起来了解一下吧
                        
                                            
                            擀面杖吹火下一句 擀面杖吹火下一句是一窍不通
                        
                                    
            
            

                 
                
                
            
        
    



    
        
        返回顶部
    
    
        
            
            514930285
        
    
    
        
            
            czq8825@qq.com
        
    




    免责声明：网站资源来源于网络，如有侵权，请及时联系删除。
    Copyright © 2024 好资源导航网. All Rights Reserved.
    
        蜀ICP备2021004611号-4
        网站地图