基于JavaScript实现图片裁剪效果

学习如何获取鼠标的坐标位置并监控鼠标的按压、拖动和释放，从而通过拖动鼠标来改变图片的大小。

还可以学习css中的clip属性。

1.CSS实现了图片的不透明和裁剪效果。

图片切割三层结构

1、第一层不透明度，为该层设置透明度

2.第二层剪辑，剪辑属性：剪切图片显示部分图像，隐藏其他部分

3.第三层选择框绝对(与第二层重叠)包括八个接触的效果

Html代码：

Div id=' box ' img src=' http : img/1 . jpg ' id=' img 1 '/img src=' http : img/1 . jpg ' id=' img 2 '/Div id=' main ' Div class=' Div min up-left '/Div class=' Div min up-right '/Div class=' Div min right '/Div class=' Div min right-down '/Div class='

正文{ background: # 333} # box { width: 500pxheight: 380px绝对位置：top: 100pxleft: 200px} #img1，# img2 { position: absolutetop : 0；left : 0；} # img1 { opacity: 0.3} #img2{ clip: rect(0，200px，200px，0)；} # main { position: absolute/*第三层需要浮动在上面，绝对定位*/width : 200 px；高度： 200 px；border: 1px实心# fff} .Divmin{ position:绝对值；宽度： 8px；height: 8px背景# fff} .左上{ margin-top :-4px；边距-left :-4px；cursor : NW-调整大小；} .向上{ left : 50%；/*父元素框主宽度的一半，注意绝对定位*/margin-left :-4px；top :-4px；cursor :n-调整大小；} .右上{ top :-4px；right :-4px；cursor : ne-调整大小；} .右{ top : 50%；边距-top :-4px；right :-4px；cursor : e-resize；} .右下{ right :-4px；bottom :-4px；cursor : se-resize；} .向下{ bottom :-4px；左侧：50%；边距-left :-4px；cursor :s-调整大小；} .左下{ left :-4px；bottom :-4px；cursor : SW-调整大小；} .左{ left :-4px；top : 50%；边距-top :-4px；cursor : w-调整大小；} 2.javascript获取选择框的偏移量

选择框鼠标拖动位置的详细说明：

OffsetLeft:元素相对于其父元素左边界的距离；

ClientX:鼠标位置横坐标；

ClientWidth:元素的宽度；

OffsetXY:是事件发生的盒子模型中的坐标，与滚动条无关。

ClientXY:是整个浏览器可用部分中的坐标，与滚动条无关，即不考虑需要拖动才能看到的区域。

PageXY:是整个网页中的坐标，与滚动条相关。

构造一个getPosition()函数，获取元素相对于屏幕左侧和顶部的距离

Js代码如下：

//获取元素相对于屏幕左上方的距离，使用offsetleft函数get position(El){ varleft=El . offsetleft；var top=el.offsetTopvar parent=el.offsetParentwhile(家长！=null){ left=parent . offsetleft；top=parent.offsetTopparent=parent.offsetParent}返回{'left':left，' top ' : top }；}三、javascript实现控制触点

监控鼠标按下、拖动和释放事件，以控制选择框的大小。

注意区别：

Element.clientWidth属性指示元素的内部宽度，以像素为单位。此属性包括内部边距，但不包括垂直滚动条(如果有)、边框和外部边距。

也就是说，clientWidth不包括边框，offsetWidth包括边框

1)点击右侧联系人

Js代码：

var mainDiv=$(' main ')；var right div=$(' right ')；var isDraging=falsevar contact=//表示按下的联系人//rightdiv。当按下鼠标时，onmousedown=function(){ is drag=true；联系人='右侧'；}//window . onmouseup=function(){释放鼠标时isdrag=false}//window . onmousemove=function(e){ if(is drag==true){ if(contact==' right '){ var e=e | | window . event；var x=e.clientX//鼠标位置的横坐标var width before=maindiv . offset with-2；//更改之前选择框的宽度//var width before=maindiv。clientwidthvar addWidth=x-getPosition(mainDiv)。左宽度前；//鼠标移动maindiv.style.width=添加宽度' px '前的宽度后选择框增加的宽度；//更改后选择框的宽度} } }//获取ID { return document . getelementbyid(ID)的函数$(ID)；}2)点击上面的联系人

当你点击上方中间的触点移动时，选择框的高度和左上角的位置需要改变。

增加的高度=选框到屏幕顶部的距离-鼠标位置的纵坐标

应该从增加的高度中减去选择框左上角的顶部值，因为当鼠标向上移动时，高度增加，顶部值减少，而当鼠标向下移动时，高度减少，顶部增加。

变更示意图：

Js代码：

else if(contact==' up '){ var y=e . clienty；//鼠标位置的纵坐标在=maindiv.offsetheight之前变化高度；//在更改var add height=get position(main div)之前选取框的高度。top-y；//增加高度maindiv.style.height=增加高度' px '前的高度；//选择框main div . style . top=main div . offset top-add height ' px '的更改宽度；//相当于变化后左上角的纵坐标。当鼠标向上移动时，纵坐标减小，向下移动时，纵坐标增大。}3)单击左侧联系人

原理和点击上面的触点一样，左边的宽度和位置会改变

变更示意图：

Js代码：

else if(contact==' left '){ var width before=maindiv . offset with-2；var addWidth=getPosition(mainDiv)。left-e . ClientX；//增加的宽度等于屏幕左侧的距离减去横坐标maindiv.style.width=添加宽度' px '前的宽度；maindiv . style . left=maindiv . offsetleft-addWidth ' px '；//左边的距离(相当于左边位置的横坐标)等于选择框和父元素之间的距离减去增加的宽度}4)单击下面的联系人

增加的宽度=鼠标位置的纵坐标-距屏幕顶部的距离-原始宽度

左上角的位置不需要改变

Js代码：

else if(contact=' down '){ var height before=maindiv . offset heaght-2；var addHeight=e . clienty-getPosition(mainDiv)。top-maindiv . offset theight；maindiv . style . height=height before add height ' px '；}5)一个点四个角的变化是高度和宽度变化的叠加，最好将以上四个变化打包成函数，便于维护和代码重用。

如果使用if else，需要判断8次，所以改为switch语句简化代码

修改后的js代码如下：

窗户。onmousemove=function(e){ var e=e | | window。事件；if(is driging==true){ switch(contact){ case ' up ' : upMove(e)；打破；case ' right ' :右移(e)；打破；案例“向下”:向下移动(e)；打破；案例“左”:向左移动(e)；打破；案例"右上“: upMove(e)；右移(e)；打破；case ' down-right ' :下移(e)；右移(e)；打破；案例“向下-向左”:向下移动(e)；向左移动(e)；打破；案例"左上“: upMove(e)；向左移动(e)；打破；} } }//获取编号的函数函数$(id){返回文档。getelementbyid(id)；}//获取元素相对于屏幕左边及上边的距离，利用offsetLeft函数GetPosition(El){ var left=El。offsetLeftvar top=El . offsettopvar parent=El . offsetparentwhile(家长！=null){ left=parent。offsetlefttop=parent . offsetopparent=parent . offsetparent }返回{'left':left，' top ' : top }；}//向上移动函数upMove(e){ var y=e . clienty；//鼠标位置的纵坐标之前的变化高度=maindiv。偏置heaght-2；//选取框变化前的高度var addHeight=GetPosition(mainDiv).top-y；//增加的高度maindiv。风格。height=添加高度' px '之前的高度；//选取框变化后的宽度maindiv。风格。top=maindiv。offset top-AddHeight ' px '；//相当于变化后左上角的纵坐标，鼠标向上移纵坐标减小，下移增大}//右移动函数右移(e){ var x=e . client x；//鼠标位置的横坐标之前的变化宽度=maindiv。偏移量为-2；//选取框变化前的宽度//var width before=maindiv。客户端宽度；var addWidth=x-GetPosition(mainDiv).左宽度前；//鼠标移动后选取框增加的宽度maindiv。风格。width=添加宽度' px '之前的宽度；//选取框变化后的宽度}//向下移动函数向下移动(e){在=maindiv之前改变高度。偏置heaght-2；var addHeight=e . clienty-GetPosition(mainDiv).top-maindiv。偏移光线；maindiv。风格。height=添加高度' px '之前的高度；}//左侧移动函数向左移动(e){ var width before=maindiv。偏移量为-2；var addWidth=GetPosition(mainDiv).left-e . ClientX；//增加的宽度等于距离屏幕左边的距离减去鼠标位置横坐标maindiv。风格。width=添加宽度' px '之前的宽度；maindiv。风格。左=maindiv。offset left-AddWidth ' px '；//左边的距离（相当于左边位置横坐标)等于选取框距父级元素的距离减去增加的宽度}四、实现选取框区域明亮显示

1)选取框内的第二层图片需重新设置其夹子属性

四个方面图示：

射流研究…代码：

//设置选取框图片区域明亮显示函数setChoice(){ var top=maindiv。偏移；var right=maindiv。offsetleft maindiv。偏移；var bottom=maindiv。偏移顶部维护。偏移心；var left=maindiv . offsetleftim G2 . style . clip=' rect(' top ' px，' right 'px，' bottom 'px，' left ' px)'；}2)鼠标移动时会导致图片被选中，可在射流研究…代码中添加一行代码使其禁止图片被选中

//禁止图片被选中文件。onselectstart=新函数('事件。返回值=false');也可以在钢性铸铁样式里添加* {用户-选择：none}

意思是文本不可选中，对图片跟差异有一样的效果。

五、实现选取框位置可拖动

首先要阻止事件冒泡

射流研究…代码如下：

//鼠标按下触点时右分区。onmousedown=function(e){ e . stopperpagation()；isDraging=true联系人='右侧；}鼠标拖拽效果的实现可见另一篇随笔http://www.cnblogs.com/vampire170204/p/6422914.html

六、实现图片剪切区域预览

新增一个图片预览区域的差异

超文本标记语言代码：

div id=' preview ' img src=' http : img/1。jpg ' id=' img 3 '/div CSS代码：

#预览{位置：绝对；宽度： 500像素；height : 380 pxtop : 100 pxleft :710 px } # preview # img 3 {位置：绝对值；}注意：要让夹子：矩形（顶部、右侧、底部、左侧)起作用，必须让作用元素为相对/绝对定位。

射流研究…部分同样是利用夹子属性，和setChoice()函数同时被调用

同时，为了固定右预览区域左上角的位置，需要设置顶部和左侧的值

//右侧图片预览功能功能设置preview(){ vartop=maindiv . offset top；var right=maindiv . offset left maindiv . offset with；var bottom=maindiv . offset top maindiv . offset heart；var left=mainDiv.offsetLeftvar img 3=$(' img 3 ')；im G3 . style . top=-top ' px '；img 3 . style . left=-left ' px '；img3.style.clip='rect(' top 'px，' right 'px，' bottom 'px，' left ' px)'；}以上是基于JavaScript实现图片裁剪效果的介绍，对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！