这篇文章主要介绍了用javascript实现图片剪切效果,本文给大家介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下
学会如何获取鼠标的坐标位置以及监听鼠标的按下、拖动、松开等动作事件，从而实现拖动鼠标来改变图片大小。
还可以学习css中的clip属性。
一、css实现图片不透明及裁剪效果。
图片剪切三层结构
1、第一层opacity,给图层设置透明度
2、第二层clip，clip属性：对图片进行裁剪，实现图像的一部分显示，其他部分进行隐藏
3、第三层选取框absolute（与第二层重叠的），包括八个触点的效果
html代码：
<p id="box">
<img src="img/1.jpg" id="img1" />
<img src="img/1.jpg" id="img2" />
<p id="main">
<p class="pmin up-left"></p>
<p class="pmin up"></p>
<p class="pmin up-right"></p>
<p class="pmin right"></p>
<p class="pmin right-down"></p>
<p class="pmin down"></p>
<p class="pmin left-down"></p>
<p class="pmin left"></p>
</p>
</p>
css代码：
body{
background: #333;
}
#box{
width: 500px;
height: 380px;
position: absolute;
top: 100px;
left: 200px;
}
#img1,#img2{
position: absolute;
top: 0;
left: 0;
}
#img1{
opacity: 0.3;
}
#img2{
clip: rect(0,200px,200px,0);
}
#main{
position: absolute;/*第三层需用绝对定位浮在上面*/
width: 200px;
height: 200px;
border: 1px solid #fff;
}
.pmin{
position: absolute;
width: 8px;
height: 8px;
background: #fff;
}
.up-left{margin-top: -4px;margin-left: -4px;cursor: nw-resize;}
.up{
left: 50%;/*父元素盒子main宽度的一半，注意要有绝对定位*/
margin-left:-4px;
top: -4px;
cursor: n-resize;
}
.up-right{top: -4px;right: -4px;cursor: ne-resize;}
.right{top: 50%;margin-top: -4px;right: -4px;cursor: e-resize;}
.right-down{right: -4px;bottom: -4px;cursor: se-resize;}
.down{bottom: -4px;left: 50%;margin-left: -4px;cursor: s-resize;}
.left-down{left: -4px;bottom: -4px;cursor: sw-resize;}
.left{left: -4px;top: 50%;margin-top: -4px;cursor: w-resize;}
二、javascript获取选择框偏移量
选择框鼠标拖动位置详解：
offsetleft:元素相对于其父元素左边界的距离；
clientx：鼠标位置的横坐标；
clientwidth：元素的宽度；
offsetxy:是该事件发生的盒子模型里的坐标，与滚动条无关。
clientxy：是整个浏览器可用部分里的坐标，与滚动条无关，即需要拖动滚动条才能看到的区域不考虑。
pagexy：是整个网页里的坐标，与滚动条有关。
构造一个getposition()函数，用于获取元素相对于屏幕左边及上边的距离
js代码如下：
//获取元素相对于屏幕左边及上边的距离，利用offsetleft
function getposition(el){
var left = el.offsetleft;
var top = el.offsettop;
var parent = el.offsetparent;
while(parent != null){
left += parent.offsetleft;
top += parent.offsettop;
parent = parent.offsetparent;
}
return {"left":left,"top":top};
}
三、javascript实现控制触点
监听鼠标的按下、拖动、松开的事件控制选取框的大小。
注意区别：
element.clientwidth 属性表示元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有的话）、边框和外边距。
即clientwidth不包括边框，offsetwidth包括边框
1）点击右面的触点
js代码：
var mainp = $('main');
var rightp = $('right');
var isdraging = false;
var contact = "";//表示被按下的触点
//鼠标按下时
rightp.onmousedown = function(){
isdraging = true;
contact = "right";
}
//鼠标松开时
window.onmouseup = function(){
isdraging = false;
}
//鼠标移动时
window.onmousemove = function(e){
if(isdraging == true){
if(contact == "right"){
var e = e||window.event;
var x = e.clientx;//鼠标位置的横坐标
var widthbefore = mainp.offsetwidth - 2;//选取框变化前的宽度
//var widthbefore = mainp.clientwidth;
var addwidth = x - getposition(mainp).left - widthbefore;//鼠标移动后选取框增加的宽度
mainp.style.width = widthbefore + addwidth + 'px';//选取框变化后的宽度
}
}
}
//获取id的函数
function $(id){
return document.getelementbyid(id);
}
2）点击上面触点
点击上面中间的触点移动时，选取框的高度和左上角的位置都需要变化。
增加的高度=选取框相对于屏幕上面的距离 - 鼠标位置的纵坐标
选取框左上角的top值要减去增加的高度，因为鼠标向上移动时高度增加，top值减小，下移时高度减小，top增大。
变化示意图：
js代码：
else if(contact == "up"){
var y = e.clienty;//鼠标位置的纵坐标
var heightbefore = mainp.offsetheight - 2;//选取框变化前的高度
var addheight = getposition(mainp).top - y;//增加的高度
mainp.style.height = heightbefore + addheight + 'px';//选取框变化后的宽度
mainp.style.top = mainp.offsettop - addheight + 'px';//相当于变化后左上角的纵坐标，鼠标向上移纵坐标减小，下移增大
}
3）点击左边触点
原理同点击上面触点，宽度和左边的位置都会变化
变化示意图：
js代码：
else if(contact == "left"){
var widthbefore = mainp.offsetwidth - 2;
var addwidth = getposition(mainp).left - e.clientx;//增加的宽度等于距离屏幕左边的距离减去鼠标位置横坐标
mainp.style.width = widthbefore + addwidth + 'px';
mainp.style.left = mainp.offsetleft - addwidth + 'px';//左边的距离（相当于左边位置横坐标）等于选取框距父级元素的距离减去增加的宽度
}
4）点击下面触点
增加的宽度 = 鼠标位置纵坐标 - 距屏幕上边的距离 - 原先的宽度
左上角的位置不需改变
js代码：
else if(contact = "down"){
var heightbefore = mainp.offsetheight - 2;
var addheight = e.clienty - getposition(mainp).top - mainp.offsetheight;
mainp.style.height = heightbefore + addheight + 'px';
}
5）点四个角时的变化是高度和宽度变化的叠加，所以最好将上面四个变化的过程封装成函数，便于维护和代码复用。
如果用if else 需要判断8次，所以改为switch语句来简化代码
修改后的js代码如下：
window.onmousemove = function(e){
var e = e||window.event;
if(isdraging == true){
switch (contact){
case "up" : upmove(e);break;
case "right" : rightmove(e);break;
case "down" : downmove(e);break;
case "left" : leftmove(e);break;
case "up-right" : upmove(e);rightmove(e);break;
case "down-right" : downmove(e);rightmove(e);break;
case "down-left" : downmove(e);leftmove(e);break;
case "up-left" : upmove(e);leftmove(e);break;
}
}
}
//获取id的函数
function $(id){
return document.getelementbyid(id);
}
//获取元素相对于屏幕左边及上边的距离，利用offsetleft
function getposition(el){
var left = el.offsetleft;
var top = el.offsettop;
var parent = el.offsetparent;
while(parent != null){
left += parent.offsetleft;
top += parent.offsettop;
parent = parent.offsetparent;
}
return {"left":left,"top":top};
}
//up移动
function upmove(e){
var y = e.clienty;//鼠标位置的纵坐标
var heightbefore = mainp.offsetheight - 2;//选取框变化前的高度
var addheight = getposition(mainp).top - y;//增加的高度
mainp.style.height = heightbefore + addheight + 'px';//选取框变化后的宽度
mainp.style.top = mainp.offsettop - addheight + 'px';//相当于变化后左上角的纵坐标，鼠标向上移纵坐标减小，下移增大
}
//right移动
function rightmove(e){
var x = e.clientx;//鼠标位置的横坐标
var widthbefore = mainp.offsetwidth - 2;//选取框变化前的宽度
//var widthbefore = mainp.clientwidth;
var addwidth = x - getposition(mainp).left - widthbefore;//鼠标移动后选取框增加的宽度
mainp.style.width = widthbefore + addwidth + 'px';//选取框变化后的宽度
}
//down移动
function downmove(e){
var heightbefore = mainp.offsetheight - 2;
var addheight = e.clienty - getposition(mainp).top - mainp.offsetheight;
mainp.style.height = heightbefore + addheight + 'px';
}
//left移动
function leftmove(e){
var widthbefore = mainp.offsetwidth - 2;
var addwidth = getposition(mainp).left - e.clientx;//增加的宽度等于距离屏幕左边的距离减去鼠标位置横坐标
mainp.style.width = widthbefore + addwidth + 'px';
mainp.style.left = mainp.offsetleft - addwidth + 'px';//左边的距离（相当于左边位置横坐标）等于选取框距父级元素的距离减去增加的宽度
}
四、实现选取框区域明亮显示
1）选取框内的第二层图片需重新设置其clip属性
四个方面图示：
js代码：
//设置选取框图片区域明亮显示
function setchoice(){
var top = mainp.offsettop;
var right = mainp.offsetleft + mainp.offsetwidth;
var bottom = mainp.offsettop + mainp.offsetheight;
var left = mainp.offsetleft;
img2.style.clip = "rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";
}
2）鼠标移动时会导致图片被选中，可在js代码中添加一行代码使其禁止图片被选中
//禁止图片被选中
document.onselectstart = new function('event.returnvalue = false;');
也可以在css样式里添加 *{user-select:none}
意思是文本不可选中，对图片跟p有一样的效果。
五、实现选取框位置可拖动
首先要阻止事件冒泡
js代码如下：
//鼠标按下触点时
rightp.onmousedown = function(e){
e.stoppropagation();
isdraging = true;
contact = "right";
}
六、实现图片剪切区域预览
新增一个图片预览区域的p
html代码：
<p id="preview">
<img src="img/1.jpg" id="img3" />
</p>
css代码：
#preview{
position: absolute;
width: 500px;
height: 380px;
top: 100px;
left:710px ;
}
#preview #img3{position: absolute;}
注意：要让clip:rect(top,right,bottom,left) 起作用，必须让作用元素为相对/绝对定位。
js部分同样是利用clip属性，和setchoice()函数同时被调用
同时为了让右边预览区的左上角位置固定，需要设置其top和left的值
//右边图片预览函数
function setpreview(){
var top = mainp.offsettop;
var right = mainp.offsetleft + mainp.offsetwidth;
var bottom = mainp.offsettop + mainp.offsetheight;
var left = mainp.offsetleft;
var img3 = $('img3');
img3.style.top = -top + 'px';
img3.style.left = -left + 'px';
img3.style.clip = "rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";
}
以上就是基于javascript实现图片剪切效果的示例代码（图）的详细内容。