JavaScript实现图片剪切效果

最新推荐文章于 2024-08-02 05:15:54 发布

IvyQiao

最新推荐文章于 2024-08-02 05:15:54 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/IvyQiao/article/details/43370123

版权

慕课网的学习视频笔记：http://www.imooc.com/learn/144。

实现过程分两部分：

1.使用CSS进行页面布局

（1）通过3层来实现，最底层的固定不动半透明图片，中间层的部分不透明的清晰图片以及最上层的选取框。

（2）在一张大图中显示一小块区域，其它部分隐藏。这块区域是边长100px的正方形，并且左上角相对于整张图片的坐标是x=10px，y=10px,实现方法为：clip：rect（10px，110px，110px，10px）

（3）要将一个宽度为8px的div始终水平居中显示在其父元素中，但其父元素的宽度不确定，用css的实现方法为：

｛position:absolute;left:50%;margin-left:-4px;｝

2.使用JS实现效果

（1）鼠标事件：按下事件、释放事件和拖动事件。

（2）拖动效果（放大）：JS获取鼠标位置来确定选取框的位置

（3）鼠标变化时不停的改变选取框的位置和大小从而达到选取框跟随变化的效果。

（4）offsetLeft:元素相对于父元素左边界的距离。

（5）获取鼠标在屏幕中的横坐标：event.clientX。

（6）获取元素div相对于父元素(已定位)的左边距：div.offsetLeft（是具体的值）。若要为div的左边距赋值用：div.style.left="";

（7）js事件冒泡是指鼠标点击里面的元素时也会触发其父元素的一些事件，为了阻止这种情况，应该在里面元素的触发函数里第一行加上:event.stopPropagation();

html：

<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="jquery-1.8.1.min.js"></script>
<script src="jquery-ui-1.10.4.custom.min.js"></script>
<script  src="test.js"></script>
<title>picture shear</title>
<style>
	body{ background-color:#333;}
	#box{position: absolute;top:100px;left:200px;width:460px;height:360px;}
	#div1{ position:absolute;}
	#img1{ opacity:0.2;position:absolute;top:0; left:0;}
	#img2{ position:absolute; top:0; left:0; clip:rect(0,200px,200px,0)}
	#main{ border: 1px solid #fff; width:200px; height:200px;position:absolute;}
	.minDiv{border: 1px solid #fff; width:8px; height:8px; position:absolute;background:#fff;}
	.m1{left:-4px;top:-4px; cursor: nw-resize;}
	.m2{left:50%; margin-left:-4px;top:-4px; cursor:n-resize;}
	.m3{right:-4px;top:-4px; cursor:ne-resize;}
	.m4{left:-4px; top:50%; margin-top:-4px;cursor: w-resize;}
	.m5{ right:-4px; top:50%; margin-top:-4px; cursor: e-resize;}
	.m6{ left:-4px; bottom:-4px; cursor:sw-resize;}
	.m7{ left:50%; margin-left:-4px;bottom:-4px;cursor: s-resize}
	.m8{ right:-4px; bottom:-4px; cursor:se-resize;}
	#preView{ position:absolute; top:100px; left:670px;width:460px;height:360px;}
	#img3{ position:absolute;};
</style></span><span style="font-size: 14px;">

</head>
<body>
<div id="box">
	<div id="div1">
		<img src="1.jpg" name="img1" width="460" height="360"  id="img1"/>
		<img src="1.jpg" name="img2" width="460" height="360"  id="img2"/>
	</div>
	<div id="main">
		<div id="left-up" class="minDiv m1"></div>
		<div id="up" class="minDiv m2"></div>
		<div id="right-up"class="minDiv m3"></div>
		<div id="left" class="minDiv m4"></div>
		<div id="right" class="minDiv m5"></div>
		<div id="left-down" class="minDiv m6"></div>
		<div id="down" class="minDiv m7"></div>
		<div id="right-down" class="minDiv m8"></div>
	</div>
</div>
<div id="preView">
	<img src="1.jpg" name="img3" width="460" height="360"  id="img3"/>
</div>		
</body>
</html></span>

test.js：

<span style="font-size:14px;">window.οnlοad=function(){
	document.onselectstart=new Function('event.returnValue=false;');//禁止文档被选中	
	//$("#main").draggable({containment:'parent',drag:setChoice});
	$( "#main" ).draggable({ containment: 'parent' ,drag: setChoice});
	var rightDiv=document.getElementById("right");
	var mainDiv=document.getElementById("main");
	var upDiv=document.getElementById("up");
	var leftDiv=document.getElementById("left");
	var downDiv=document.getElementById("down");
	var leftUpDiv=document.getElementById("left-up");
	var rightUpDiv=document.getElementById("right-up");
	var leftDownDiv=document.getElementById("left-down");
	var rightDownDiv=document.getElementById("right-down");
	var ifKeyDown=false;
	var contact="";
//鼠标按下事件
rightDiv.οnmοusedοwn=function(e){
	e.stopPropagation();//阻止js事件冒泡
	ifKeyDown=true;
	contact="right";
	}
upDiv.οnmοusedοwn=function(e){
	e.stopPropagation();
	ifKeyDown=true;
	contact="up";
	}
leftDiv.οnmοusedοwn=function(e){
	e.stopPropagation();
	ifKeyDown=true;
	contact="left";
	}
downDiv.οnmοusedοwn=function(e){
	e.stopPropagation();
	ifKeyDown=true;
	contact="down";
	}
leftUpDiv.οnmοusedοwn=function(e){
	e.stopPropagation();
	ifKeyDown=true;
	contact="left-up";
	}
rightUpDiv.οnmοusedοwn=function(e){
	e.stopPropagation();
	ifKeyDown=true;
	contact="right-up";
	}
leftDownDiv.οnmοusedοwn=function(e){
	e.stopPropagation();
	ifKeyDown=true;
	contact="left-down";
	}
rightDownDiv.οnmοusedοwn=function(e){
	e.stopPropagation();
	ifKeyDown=true;
	contact="right-down";
	}	
//鼠标松开事件
window.οnmοuseup=function(){
	ifKeyDown=false;
	}
//鼠标移动事件
window.οnmοusemοve=function(e){
	if(ifKeyDown==true){
		switch(contact){//switch的执行效率比if高
			case"right":rightMove(e);break;
			case"left":leftMove(e);break;
			case"up":upMove(e);break;
			case"down":downMove(e);break;
			case"left-up":leftMove(e);upMove(e);break;
			case"right-up":rightMove(e);upMove(e);break;
			case"left-down":leftMove(e);downMove(e);break;
			case"right-down":rightMove(e);downMove(e);break;
			}
		}
		setChoice();
		setPreview();
    }
//right移动
function rightMove(e){
	var x=e.clientX;//鼠标x坐标
	var beforeWidth=mainDiv.offsetWidth-2;//选取框变化之前的宽度
	var addWidth=x-getPosition(mainDiv).left-beforeWidth;//鼠标移动后选取框增加的宽度
	mainDiv.style.width=addWidth+beforeWidth+"px";//选取框变化之后的宽度
	}
//left移动
function leftMove(e){
	var x=e.clientX;
	var beforeWidth=mainDiv.offsetWidth-2;
	var addWidth=getPosition(mainDiv).left-x;
	mainDiv.style.width=addWidth+beforeWidth+"px";
	mainDiv.style.left=mainDiv.offsetLeft-addWidth+"px";
	}
//up移动
function upMove(e){
	var y=e.clientY;
	var beforeHeight=mainDiv.offsetHeight-2;
	var mainY=getPosition(mainDiv).top;
	var addHeight=mainY-y;
	mainDiv.style.height=addHeight+beforeHeight+"px";//选取框变化后的高度
	mainDiv.style.top=mainDiv.offsetTop-addHeight+"px";//选取框变化后上面触点的坐标
	}
//down移动	
function downMove(e){
	var y=e.clientY;
	var beforeHeight=mainDiv.offsetHeight-2;
	var mainY=getPosition(mainDiv).top;
	var addHeight=y-mainY-beforeHeight;
	mainDiv.style.height=addHeight+beforeHeight+"px";//默认情况是向下、向右增长，因此不用设置坐标
			//mainDiv.style.down=mainDiv.offsetDown-addHeight+"px";
	}
//设置选框区域明亮显示
function setChoice(){
	var top=mainDiv.offsetTop;
	var right=mainDiv.offsetLeft+mainDiv.offsetWidth;
	var bottom=mainDiv.offsetTop+mainDiv.offsetHeight;
	var left=mainDiv.offsetLeft;
	var img2=document.getElementById("img2");
	img2.style.clip="rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";
	}	
//设置预览
function setPreview(){
	var top=mainDiv.offsetTop;
	var right=mainDiv.offsetLeft+mainDiv.offsetWidth;
	var bottom=mainDiv.offsetTop+mainDiv.offsetHeight;
	var left=mainDiv.offsetLeft;
	var img3=document.getElementById("img3");
	img3.style.clip="rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";//调用clip属性的图片需设置绝对定位,因为需要设置top、left等
	img3.style.top=-top+"px";//img3.offsetTop是具体值，因此不能被赋值
	img3.style.left=-left+"px";
	}
}

// 获取元素相对于屏幕左边和上边的距离
function getPosition(node){
	 var left=node.offsetLeft;
	 var top=node.offsetTop;
	 var parent=node.offsetParent;
	 while(parent!=null){
		 left+=parent.offsetLeft;
		 top+=parent.offsetTop;
		 parent=parent.offsetParent;
		 }
	 return {"left":left,"top":top};	 
}</span>