jquery 图片裁切预览,简单拖动

看到网上的图片裁切，很是有感觉，我自己基于jquery-ui，然后根据大家普遍接受的clip原理，实现的简单的预览

想整张图片，不知道怎么整上。

 

 

Js代码

1. // JavaScript Document   
2. var x;   
3. var y;   
4. var prex;   
5. var prey;   
6. $(document).ready(function(){   
7.                     $("#layhandle").draggable({cursor:"move",containment:"#laycropper"});   
8.                     $("#layhandle").resizable({ handles: 'n, e, s, w' });//调整为四个方向改变   
9.                     document.οnmοusemοve=getpos;   
10.                            });   
11.   
12. //获取有用坐标   
13. function getpos(){   
14.         /*var x=$("#layhandle")[0].offsetWidth-$("#layhandle")[0].clientLeft;//包括边框  
15.         var y=$("#layhandle")[0].offsetHeight-$("#layhandle")[0].clientTop;*/  
16.          x=$("#layhandle")[0].clientWidth;//获取可见部分宽度，去掉border   
17.          y=$("#layhandle")[0].clientHeight;//获取可见部分高度，去掉border   
18.         var parentx=$("#layhandle")[0].offsetLeft;//获取距离父元素的宽   
19.         var parenty=$("#layhandle")[0].offsetTop;//获取距离父元素的高   
20.         //alert($("#layhandle")[0].parentNode.clientWidth);   
21.         /*  
22.         rect(top,right,bottom,left)  
23.         **/  
24.         var rtop=parenty;   
25.         var rright=parentx+x;   
26.         var rbottom=parenty+y;   
27.         var rleft=parentx;   
28.         var rectt="rect("+rtop+"px,"+rright+"px,"+rbottom+"px,"+rleft+"px)";   
29.         $("#laycropper img").css("clip",rectt);//利用clip功能实现切割   
30.         createview();   
31.     }   
32. //生成一个按比例放大后的部分图像，显示在一个预览框里   
33. function createview(){   
34.         var bili=2;   
35.          prex=$("#layhandle")[0].clientWidth;//获取可见部分宽度，去掉border   
36.          prey=$("#layhandle")[0].clientHeight;//获取可见部分高度，去掉border   
37.         var parentx=$("#layhandle")[0].offsetLeft;//获取距离父元素的宽   
38.         var parenty=$("#layhandle")[0].offsetTop;//获取距离父元素的高   
39.         var rtop=parenty*bili;   
40.         var rright=(parentx+x)*bili;   
41.         var rbottom=(parenty+y)*bili;   
42.         var rleft=parentx*bili;   
43.         var rectt="rect("+rtop+"px,"+rright+"px,"+rbottom+"px,"+rleft+"px)";   
44.         $("#preview img").css("clip",rectt);   
45.     }  

// JavaScript Document
var x;
var y;
var prex;
var prey;
$(document).ready(function(){
					$("#layhandle").draggable({cursor:"move",containment:"#laycropper"});
					$("#layhandle").resizable({ handles: 'n, e, s, w' });//调整为四个方向改变
			    	document.οnmοusemοve=getpos;
						   });

//获取有用坐标
function getpos(){
		/*var x=$("#layhandle")[0].offsetWidth-$("#layhandle")[0].clientLeft;//包括边框
		var y=$("#layhandle")[0].offsetHeight-$("#layhandle")[0].clientTop;*/
		 x=$("#layhandle")[0].clientWidth;//获取可见部分宽度，去掉border
		 y=$("#layhandle")[0].clientHeight;//获取可见部分高度，去掉border
		var parentx=$("#layhandle")[0].offsetLeft;//获取距离父元素的宽
		var parenty=$("#layhandle")[0].offsetTop;//获取距离父元素的高
		//alert($("#layhandle")[0].parentNode.clientWidth);
		/*
		rect(top,right,bottom,left)
		**/
		var rtop=parenty;
		var rright=parentx+x;
		var rbottom=parenty+y;
		var rleft=parentx;
		var rectt="rect("+rtop+"px,"+rright+"px,"+rbottom+"px,"+rleft+"px)";
		$("#laycropper img").css("clip",rectt);//利用clip功能实现切割
		createview();
	}
//生成一个按比例放大后的部分图像，显示在一个预览框里
function createview(){
		var bili=2;
		 prex=$("#layhandle")[0].clientWidth;//获取可见部分宽度，去掉border
		 prey=$("#layhandle")[0].clientHeight;//获取可见部分高度，去掉border
		var parentx=$("#layhandle")[0].offsetLeft;//获取距离父元素的宽
		var parenty=$("#layhandle")[0].offsetTop;//获取距离父元素的高
		var rtop=parenty*bili;
		var rright=(parentx+x)*bili;
		var rbottom=(parenty+y)*bili;
		var rleft=parentx*bili;
		var rectt="rect("+rtop+"px,"+rright+"px,"+rbottom+"px,"+rleft+"px)";
		$("#preview img").css("clip",rectt);
	}

 

 代码很简单，使用的只是简单的操作，希望大家自己做拓展，这里只是简单的思路，我也再完善完善，让其更加自定义。

js拖放功能使用jquery-ui，用起来方便，但终究不是自己的，自己也从网上学习后，写了个简单的拖动脚本。

 

 

Js代码

1. // JavaScript Document   
2. var layerx;   
3. var layery;   
4. var i=0;   
5. $(document).ready(function(){   
6.                           $("#demo")[0].οnmοusedοwn=drag;//准备拖动   
7.                           $("#demo")[0].οnmοusemοve=dmove;//开始拖动   
8.                           document.οnmοuseup=delmouse;//停止移动   
9.                            });   
10.             function drag(event){   
11.                 event=event||window.event;   
12.                 stopBubble(event);   
13.                 stopdefault(event);   
14.                 i=1;   
15.                 layerx=event.offsetX||event.layerX;   
16.                 layery=event.offsetY||event.layerY;   
17.                 }   
18.             function dmove(event){   
19.                 event=event||window.event;   
20.                 stopBubble(event);   
21.                 stopdefault(event);   
22.                 if(i==1){   
23.                 $("#demo")[0].style.left=event.clientX-layerx+"px";   
24.                 $("#demo")[0].style.top=event.clientY-layery+"px";   
25.                 }   
26.                 }   
27.             function delmouse(){   
28.                 i=0;   
29.                 }   
30.             //防止冒泡事件   
31.             function stopBubble(e){   
32.                 if(e&&e.stopPropagation){   
33.                     e.stopPropagation();   
34.                     }   
35.                 else{   
36.                     window.event.cancelBubble=true;   
37.                     }   
38.                 }   
39.                 //阻止浏览器默认行为   
40.             function stopdefault(e){   
41.                 if(e&&e.preventDefault){   
42.                     e.preventDefault();   
43.                     }   
44.                     else{   
45.                         window.event.returnValue=false;//取消默认事件   
46.                         }   
47.                 }   
48.               

// JavaScript Document
var layerx;
var layery;
var i=0;
$(document).ready(function(){
						  $("#demo")[0].οnmοusedοwn=drag;//准备拖动
						  $("#demo")[0].οnmοusemοve=dmove;//开始拖动
						  document.οnmοuseup=delmouse;//停止移动
						   });
			function drag(event){
				event=event||window.event;
				stopBubble(event);
				stopdefault(event);
				i=1;
				layerx=event.offsetX||event.layerX;
				layery=event.offsetY||event.layerY;
				}
			function dmove(event){
				event=event||window.event;
				stopBubble(event);
				stopdefault(event);
				if(i==1){
				$("#demo")[0].style.left=event.clientX-layerx+"px";
				$("#demo")[0].style.top=event.clientY-layery+"px";
				}
				}
			function delmouse(){
				i=0;
				}
			//防止冒泡事件
			function stopBubble(e){
				if(e&&e.stopPropagation){
					e.stopPropagation();
					}
				else{
					window.event.cancelBubble=true;
					}
				}
				//阻止浏览器默认行为
			function stopdefault(e){
				if(e&&e.preventDefault){
					e.preventDefault();
					}
					else{
						window.event.returnValue=false;//取消默认事件
						}
				}
			

 缩放的原理也不难，在这就不发了。