jsp网站头像上传并编辑的方法

一般使用是前台Js编辑好效果以后,把编辑后的结果传到后台由JAVA处理,比如:JS编辑具体图片的大小\旋转\缩放等,然后把这些数据传到服务器上,由服务器处理;这里给你提供JS的编辑,至于后台的图片编辑我没有,你可以到网上找下(这个js我也是在JAVAEYE里收集的,忘记那位朋友叫什么了)
Drag.js  代码入下

Java代码  

1. //拖放程序   
2. var Drag = Class.create();   
3. Drag.prototype = {   
4.   //拖放对象   
5.   initialize: function(drag, options) {   
6.     this.Drag = $(drag);//拖放对象   
7.     this._x = this._y = 0;//记录鼠标相对拖放对象的位置   
8.     this._marginLeft = this._marginTop = 0;//记录margin   
9.     //事件对象(用于绑定移除事件)   
10.     this._fM = BindAsEventListener(this, this.Move);   
11.     this._fS = Bind(this, this.Stop);   
12.        
13.     this.SetOptions(options);   
14.        
15.     this.Limit = !!this.options.Limit;   
16.     this.mxLeft = parseInt(this.options.mxLeft);   
17.     this.mxRight = parseInt(this.options.mxRight);   
18.     this.mxTop = parseInt(this.options.mxTop);   
19.     this.mxBottom = parseInt(this.options.mxBottom);   
20.        
21.     this.LockX = !!this.options.LockX;   
22.     this.LockY = !!this.options.LockY;   
23.     this.Lock = !!this.options.Lock;   
24.        
25.     this.onStart = this.options.onStart;   
26.     this.onMove = this.options.onMove;   
27.     this.onStop = this.options.onStop;   
28.        
29.     this._Handle = $(this.options.Handle) || this.Drag;   
30.     this._mxContainer = $(this.options.mxContainer) || null;   
31.        
32.     this.Drag.style.position = "absolute";   
33.     //透明   
34.     if(isIE && !!this.options.Transparent){   
35.         //填充拖放对象   
36.         with(this._Handle.appendChild(document.createElement("div")).style){   
37.             width = height = "100%"; backgroundColor = "#fff"; filter = "alpha(opacity:0)"; fontSize = 0;   
38.         }   
39.     }   
40.     //修正范围   
41.     this.Repair();   
42.     addEventHandler(this._Handle, "mousedown", BindAsEventListener(this, this.Start));   
43.   },   
44.   //设置默认属性   
45.   SetOptions: function(options) {   
46.     this.options = {//默认值   
47.         Handle:         "",//设置触发对象（不设置则使用拖放对象）   
48.         Limit:          false,//是否设置范围限制(为true时下面参数有用,可以是负数)   
49.         mxLeft:         0,//左边限制   
50.         mxRight:        9999,//右边限制   
51.         mxTop:          0,//上边限制   
52.         mxBottom:       9999,//下边限制   
53.         mxContainer:    "",//指定限制在容器内   
54.         LockX:          false,//是否锁定水平方向拖放   
55.         LockY:          false,//是否锁定垂直方向拖放   
56.         Lock:           false,//是否锁定   
57.         Transparent:    false,//是否透明   
58.         onStart:        function(){},//开始移动时执行   
59.         onMove:         function(){},//移动时执行   
60.         onStop:         function(){}//结束移动时执行   
61.     };   
62.     Extend(this.options, options || {});   
63.   },   
64.   //准备拖动   
65.   Start: function(oEvent) {   
66.     if(this.Lock){ return; }   
67.     this.Repair();   
68.     //记录鼠标相对拖放对象的位置   
69.     this._x = oEvent.clientX - this.Drag.offsetLeft;   
70.     this._y = oEvent.clientY - this.Drag.offsetTop;   
71.     //记录margin   
72.     this._marginLeft = parseInt(CurrentStyle(this.Drag).marginLeft) || 0;   
73.     this._marginTop = parseInt(CurrentStyle(this.Drag).marginTop) || 0;   
74.     //mousemove时移动 mouseup时停止   
75.     addEventHandler(document, "mousemove", this._fM);   
76.     addEventHandler(document, "mouseup", this._fS);   
77.     if(isIE){   
78.         //焦点丢失   
79.         addEventHandler(this._Handle, "losecapture", this._fS);   
80.         //设置鼠标捕获   
81.         this._Handle.setCapture();   
82.     }else{   
83.         //焦点丢失   
84.         addEventHandler(window, "blur", this._fS);   
85.         //阻止默认动作   
86.         oEvent.preventDefault();   
87.     };   
88.     //附加程序   
89.     this.onStart();   
90.   },   
91.   //修正范围   
92.   Repair: function() {   
93.     if(this.Limit){   
94.         //修正错误范围参数   
95.         this.mxRight = Math.max(this.mxRight, this.mxLeft + this.Drag.offsetWidth);   
96.         this.mxBottom = Math.max(this.mxBottom, this.mxTop + this.Drag.offsetHeight);   
97.         //如果有容器必须设置position为relative或absolute来相对或绝对定位，并在获取offset之前设置   
98.         !this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || CurrentStyle(this._mxContainer).position == "absolute" || (this._mxContainer.style.position = "relative");   
99.     }   
100.   },   
101.   //拖动   
102.   Move: function(oEvent) {   
103.     //判断是否锁定   
104.     if(this.Lock){ this.Stop(); return; };   
105.     //清除选择   
106.     window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();   
107.     //设置移动参数   
108.     var iLeft = oEvent.clientX - this._x, iTop = oEvent.clientY - this._y;   
109.     //设置范围限制   
110.     if(this.Limit){   
111.         //设置范围参数   
112.         var mxLeft = this.mxLeft, mxRight = this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom;   
113.         //如果设置了容器，再修正范围参数   
114.         if(!!this._mxContainer){   
115.             mxLeft = Math.max(mxLeft, 0);   
116.             mxTop = Math.max(mxTop, 0);   
117.             mxRight = Math.min(mxRight, this._mxContainer.clientWidth);   
118.             mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight);   
119.         };   
120.         //修正移动参数   
121.         iLeft = Math.max(Math.min(iLeft, mxRight - this.Drag.offsetWidth), mxLeft);   
122.         iTop = Math.max(Math.min(iTop, mxBottom - this.Drag.offsetHeight), mxTop);   
123.     }   
124.     //设置位置，并修正margin   
125.     if(!this.LockX){ this.Drag.style.left = iLeft - this._marginLeft + "px"; }   
126.     if(!this.LockY){ this.Drag.style.top = iTop - this._marginTop + "px"; }   
127.     //附加程序   
128.     this.onMove();   
129.   },   
130.   //停止拖动   
131.   Stop: function() {   
132.     //移除事件   
133.     removeEventHandler(document, "mousemove", this._fM);   
134.     removeEventHandler(document, "mouseup", this._fS);   
135.     if(isIE){   
136.         removeEventHandler(this._Handle, "losecapture", this._fS);   
137.         this._Handle.releaseCapture();   
138.     }else{   
139.         removeEventHandler(window, "blur", this._fS);   
140.     };   
141.     //附加程序   
142.     this.onStop();   
143.   }   
144. };  

//拖放程序
var Drag = Class.create();
Drag.prototype = {
  //拖放对象
  initialize: function(drag, options) {
	this.Drag = $(drag);//拖放对象
	this._x = this._y = 0;//记录鼠标相对拖放对象的位置
	this._marginLeft = this._marginTop = 0;//记录margin
	//事件对象(用于绑定移除事件)
	this._fM = BindAsEventListener(this, this.Move);
	this._fS = Bind(this, this.Stop);
	
	this.SetOptions(options);
	
	this.Limit = !!this.options.Limit;
	this.mxLeft = parseInt(this.options.mxLeft);
	this.mxRight = parseInt(this.options.mxRight);
	this.mxTop = parseInt(this.options.mxTop);
	this.mxBottom = parseInt(this.options.mxBottom);
	
	this.LockX = !!this.options.LockX;
	this.LockY = !!this.options.LockY;
	this.Lock = !!this.options.Lock;
	
	this.onStart = this.options.onStart;
	this.onMove = this.options.onMove;
	this.onStop = this.options.onStop;
	
	this._Handle = $(this.options.Handle) || this.Drag;
	this._mxContainer = $(this.options.mxContainer) || null;
	
	this.Drag.style.position = "absolute";
	//透明
	if(isIE && !!this.options.Transparent){
		//填充拖放对象
		with(this._Handle.appendChild(document.createElement("div")).style){
			width = height = "100%"; backgroundColor = "#fff"; filter = "alpha(opacity:0)"; fontSize = 0;
		}
	}
	//修正范围
	this.Repair();
	addEventHandler(this._Handle, "mousedown", BindAsEventListener(this, this.Start));
  },
  //设置默认属性
  SetOptions: function(options) {
	this.options = {//默认值
		Handle:			"",//设置触发对象（不设置则使用拖放对象）
		Limit:			false,//是否设置范围限制(为true时下面参数有用,可以是负数)
		mxLeft:			0,//左边限制
		mxRight:		9999,//右边限制
		mxTop:			0,//上边限制
		mxBottom:		9999,//下边限制
		mxContainer:	"",//指定限制在容器内
		LockX:			false,//是否锁定水平方向拖放
		LockY:			false,//是否锁定垂直方向拖放
		Lock:			false,//是否锁定
		Transparent:	false,//是否透明
		onStart:		function(){},//开始移动时执行
		onMove:			function(){},//移动时执行
		onStop:			function(){}//结束移动时执行
	};
	Extend(this.options, options || {});
  },
  //准备拖动
  Start: function(oEvent) {
	if(this.Lock){ return; }
	this.Repair();
	//记录鼠标相对拖放对象的位置
	this._x = oEvent.clientX - this.Drag.offsetLeft;
	this._y = oEvent.clientY - this.Drag.offsetTop;
	//记录margin
	this._marginLeft = parseInt(CurrentStyle(this.Drag).marginLeft) || 0;
	this._marginTop = parseInt(CurrentStyle(this.Drag).marginTop) || 0;
	//mousemove时移动 mouseup时停止
	addEventHandler(document, "mousemove", this._fM);
	addEventHandler(document, "mouseup", this._fS);
	if(isIE){
		//焦点丢失
		addEventHandler(this._Handle, "losecapture", this._fS);
		//设置鼠标捕获
		this._Handle.setCapture();
	}else{
		//焦点丢失
		addEventHandler(window, "blur", this._fS);
		//阻止默认动作
		oEvent.preventDefault();
	};
	//附加程序
	this.onStart();
  },
  //修正范围
  Repair: function() {
	if(this.Limit){
		//修正错误范围参数
		this.mxRight = Math.max(this.mxRight, this.mxLeft + this.Drag.offsetWidth);
		this.mxBottom = Math.max(this.mxBottom, this.mxTop + this.Drag.offsetHeight);
		//如果有容器必须设置position为relative或absolute来相对或绝对定位，并在获取offset之前设置
		!this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || CurrentStyle(this._mxContainer).position == "absolute" || (this._mxContainer.style.position = "relative");
	}
  },
  //拖动
  Move: function(oEvent) {
	//判断是否锁定
	if(this.Lock){ this.Stop(); return; };
	//清除选择
	window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
	//设置移动参数
	var iLeft = oEvent.clientX - this._x, iTop = oEvent.clientY - this._y;
	//设置范围限制
	if(this.Limit){
		//设置范围参数
		var mxLeft = this.mxLeft, mxRight = this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom;
		//如果设置了容器，再修正范围参数
		if(!!this._mxContainer){
			mxLeft = Math.max(mxLeft, 0);
			mxTop = Math.max(mxTop, 0);
			mxRight = Math.min(mxRight, this._mxContainer.clientWidth);
			mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight);
		};
		//修正移动参数
		iLeft = Math.max(Math.min(iLeft, mxRight - this.Drag.offsetWidth), mxLeft);
		iTop = Math.max(Math.min(iTop, mxBottom - this.Drag.offsetHeight), mxTop);
	}
	//设置位置，并修正margin
	if(!this.LockX){ this.Drag.style.left = iLeft - this._marginLeft + "px"; }
	if(!this.LockY){ this.Drag.style.top = iTop - this._marginTop + "px"; }
	//附加程序
	this.onMove();
  },
  //停止拖动
  Stop: function() {
	//移除事件
	removeEventHandler(document, "mousemove", this._fM);
	removeEventHandler(document, "mouseup", this._fS);
	if(isIE){
		removeEventHandler(this._Handle, "losecapture", this._fS);
		this._Handle.releaseCapture();
	}else{
		removeEventHandler(window, "blur", this._fS);
	};
	//附加程序
	this.onStop();
  }
};

Resize.js 如下:

Java代码  

1. //缩放程序   
2. var Resize = Class.create();   
3. Resize.prototype = {   
4.   //缩放对象   
5.   initialize: function(obj, options) {   
6.     this._obj = $(obj);//缩放对象   
7.        
8.     this._styleWidth = this._styleHeight = this._styleLeft = this._styleTop = 0;//样式参数   
9.     this._sideRight = this._sideDown = this._sideLeft = this._sideUp = 0;//坐标参数   
10.     this._fixLeft = this._fixTop = 0;//定位参数   
11.     this._scaleLeft = this._scaleTop = 0;//定位坐标   
12.        
13.     this._mxSet = function(){};//范围设置程序   
14.     this._mxRightWidth = this._mxDownHeight = this._mxUpHeight = this._mxLeftWidth = 0;//范围参数   
15.     this._mxScaleWidth = this._mxScaleHeight = 0;//比例范围参数   
16.        
17.     this._fun = function(){};//缩放执行程序   
18.        
19.     //获取边框宽度   
20.     var _style = CurrentStyle(this._obj);   
21.     this._borderX = (parseInt(_style.borderLeftWidth) || 0) + (parseInt(_style.borderRightWidth) || 0);   
22.     this._borderY = (parseInt(_style.borderTopWidth) || 0) + (parseInt(_style.borderBottomWidth) || 0);   
23.     //事件对象(用于绑定移除事件)   
24.     this._fR = BindAsEventListener(this, this.Resize);   
25.     this._fS = Bind(this, this.Stop);   
26.        
27.     this.SetOptions(options);   
28.     //范围限制   
29.     this.Max = !!this.options.Max;   
30.     this._mxContainer = $(this.options.mxContainer) || null;   
31.     this.mxLeft = Math.round(this.options.mxLeft);   
32.     this.mxRight = Math.round(this.options.mxRight);   
33.     this.mxTop = Math.round(this.options.mxTop);   
34.     this.mxBottom = Math.round(this.options.mxBottom);   
35.     //宽高限制   
36.     this.Min = !!this.options.Min;   
37.     this.minWidth = Math.round(this.options.minWidth);   
38.     this.minHeight = Math.round(this.options.minHeight);   
39.     //按比例缩放   
40.     this.Scale = !!this.options.Scale;   
41.     this.Ratio = Math.max(this.options.Ratio, 0);   
42.        
43.     this.onResize = this.options.onResize;   
44.        
45.     this._obj.style.position = "absolute";   
46.     !this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || (this._mxContainer.style.position = "relative");   
47.   },   
48.   //设置默认属性   
49.   SetOptions: function(options) {   
50.     this.options = {//默认值   
51.         Max:        false,//是否设置范围限制(为true时下面mx参数有用)   
52.         mxContainer:"",//指定限制在容器内   
53.         mxLeft:     0,//左边限制   
54.         mxRight:    9999,//右边限制   
55.         mxTop:      0,//上边限制   
56.         mxBottom:   9999,//下边限制   
57.         Min:        false,//是否最小宽高限制(为true时下面min参数有用)   
58.         minWidth:   50,//最小宽度   
59.         minHeight:  50,//最小高度   
60.         Scale:      false,//是否按比例缩放   
61.         Ratio:      0,//缩放比例(宽/高)   
62.         onResize:   function(){}//缩放时执行   
63.     };   
64.     Extend(this.options, options || {});   
65.   },   
66.   //设置触发对象   
67.   Set: function(resize, side) {   
68.     var resize = $(resize), fun;   
69.     if(!resize) return;   
70.     //根据方向设置   
71.     switch (side.toLowerCase()) {   
72.     case "up" :   
73.         fun = this.Up;   
74.         break;   
75.     case "down" :   
76.         fun = this.Down;   
77.         break;   
78.     case "left" :   
79.         fun = this.Left;   
80.         break;   
81.     case "right" :   
82.         fun = this.Right;   
83.         break;   
84.     case "left-up" :   
85.         fun = this.LeftUp;   
86.         break;   
87.     case "right-up" :   
88.         fun = this.RightUp;   
89.         break;   
90.     case "left-down" :   
91.         fun = this.LeftDown;   
92.         break;   
93.     case "right-down" :   
94.     default :   
95.         fun = this.RightDown;   
96.     };   
97.     //设置触发对象   
98.     addEventHandler(resize, "mousedown", BindAsEventListener(this, this.Start, fun));   
99.   },   
100.   //准备缩放   
101.   Start: function(e, fun, touch) {     
102.     //防止冒泡(跟拖放配合时设置)   
103.     e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true);   
104.     //设置执行程序   
105.     this._fun = fun;   
106.     //样式参数值   
107.     this._styleWidth = this._obj.clientWidth;   
108.     this._styleHeight = this._obj.clientHeight;   
109.     this._styleLeft = this._obj.offsetLeft;   
110.     this._styleTop = this._obj.offsetTop;   
111.     //四条边定位坐标   
112.     this._sideLeft = e.clientX - this._styleWidth;   
113.     this._sideRight = e.clientX + this._styleWidth;   
114.     this._sideUp = e.clientY - this._styleHeight;   
115.     this._sideDown = e.clientY + this._styleHeight;   
116.     //top和left定位参数   
117.     this._fixLeft = this._styleLeft + this._styleWidth;   
118.     this._fixTop = this._styleTop + this._styleHeight;   
119.     //缩放比例   
120.     if(this.Scale){   
121.         //设置比例   
122.         this.Ratio = Math.max(this.Ratio, 0) || this._styleWidth / this._styleHeight;   
123.         //left和top的定位坐标   
124.         this._scaleLeft = this._styleLeft + this._styleWidth / 2;   
125.         this._scaleTop = this._styleTop + this._styleHeight / 2;   
126.     };   
127.     //范围限制   
128.     if(this.Max){   
129.         //设置范围参数   
130.         var mxLeft = this.mxLeft, mxRight = this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom;   
131.         //如果设置了容器，再修正范围参数   
132.         if(!!this._mxContainer){   
133.             mxLeft = Math.max(mxLeft, 0);   
134.             mxTop = Math.max(mxTop, 0);   
135.             mxRight = Math.min(mxRight, this._mxContainer.clientWidth);   
136.             mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight);   
137.         };   
138.         //根据最小值再修正   
139.         mxRight = Math.max(mxRight, mxLeft + (this.Min ? this.minWidth : 0) + this._borderX);   
140.         mxBottom = Math.max(mxBottom, mxTop + (this.Min ? this.minHeight : 0) + this._borderY);   
141.         //由于转向时要重新设置所以写成function形式   
142.         this._mxSet = function(){   
143.             this._mxRightWidth = mxRight - this._styleLeft - this._borderX;   
144.             this._mxDownHeight = mxBottom - this._styleTop - this._borderY;   
145.             this._mxUpHeight = Math.max(this._fixTop - mxTop, this.Min ? this.minHeight : 0);   
146.             this._mxLeftWidth = Math.max(this._fixLeft - mxLeft, this.Min ? this.minWidth : 0);   
147.         };   
148.         this._mxSet();   
149.         //有缩放比例下的范围限制   
150.         if(this.Scale){   
151.             this._mxScaleWidth = Math.min(this._scaleLeft - mxLeft, mxRight - this._scaleLeft - this._borderX) * 2;   
152.             this._mxScaleHeight = Math.min(this._scaleTop - mxTop, mxBottom - this._scaleTop - this._borderY) * 2;   
153.         };   
154.     };   
155.     //mousemove时缩放 mouseup时停止   
156.     addEventHandler(document, "mousemove", this._fR);   
157.     addEventHandler(document, "mouseup", this._fS);   
158.     if(isIE){   
159.         addEventHandler(this._obj, "losecapture", this._fS);   
160.         this._obj.setCapture();   
161.     }else{   
162.         addEventHandler(window, "blur", this._fS);   
163.         e.preventDefault();   
164.     };   
165.   },   
166.   //缩放   
167.   Resize: function(e) {   
168.     //清除选择   
169.     window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();   
170.     //执行缩放程序   
171.     this._fun(e);   
172.     //设置样式，变量必须大于等于0否则ie出错   
173.     with(this._obj.style){   
174.         width = this._styleWidth + "px"; height = this._styleHeight + "px";   
175.         top = this._styleTop + "px"; left = this._styleLeft + "px";   
176.     }   
177.     //附加程序   
178.     this.onResize();   
179.   },   
180.   //缩放程序   
181.   //上   
182.   Up: function(e) {   
183.     this.RepairY(this._sideDown - e.clientY, this._mxUpHeight);   
184.     this.RepairTop();   
185.     this.TurnDown(this.Down);   
186.   },   
187.   //下   
188.   Down: function(e) {   
189.     this.RepairY(e.clientY - this._sideUp, this._mxDownHeight);   
190.     this.TurnUp(this.Up);   
191.   },   
192.   //右   
193.   Right: function(e) {   
194.     this.RepairX(e.clientX - this._sideLeft, this._mxRightWidth);   
195.     this.TurnLeft(this.Left);   
196.   },   
197.   //左   
198.   Left: function(e) {   
199.     this.RepairX(this._sideRight - e.clientX, this._mxLeftWidth);   
200.     this.RepairLeft();   
201.     this.TurnRight(this.Right);   
202.   },   
203.   //右下   
204.   RightDown: function(e) {   
205.     this.RepairAngle(   
206.         e.clientX - this._sideLeft, this._mxRightWidth,   
207.         e.clientY - this._sideUp, this._mxDownHeight   
208.     );   
209.     this.TurnLeft(this.LeftDown) || this.Scale || this.TurnUp(this.RightUp);   
210.   },   
211.   //右上   
212.   RightUp: function(e) {   
213.     this.RepairAngle(   
214.         e.clientX - this._sideLeft, this._mxRightWidth,   
215.         this._sideDown - e.clientY, this._mxUpHeight   
216.     );   
217.     this.RepairTop();   
218.     this.TurnLeft(this.LeftUp) || this.Scale || this.TurnDown(this.RightDown);   
219.   },   
220.   //左下   
221.   LeftDown: function(e) {   
222.     this.RepairAngle(   
223.         this._sideRight - e.clientX, this._mxLeftWidth,   
224.         e.clientY - this._sideUp, this._mxDownHeight   
225.     );   
226.     this.RepairLeft();   
227.     this.TurnRight(this.RightDown) || this.Scale || this.TurnUp(this.LeftUp);   
228.   },   
229.   //左上   
230.   LeftUp: function(e) {   
231.     this.RepairAngle(   
232.         this._sideRight - e.clientX, this._mxLeftWidth,   
233.         this._sideDown - e.clientY, this._mxUpHeight   
234.     );   
235.     this.RepairTop(); this.RepairLeft();   
236.     this.TurnRight(this.RightUp) || this.Scale || this.TurnDown(this.LeftDown);   
237.   },   
238.   //修正程序   
239.   //水平方向   
240.   RepairX: function(iWidth, mxWidth) {   
241.     iWidth = this.RepairWidth(iWidth, mxWidth);   
242.     if(this.Scale){   
243.         var iHeight = this.RepairScaleHeight(iWidth);   
244.         if(this.Max && iHeight > this._mxScaleHeight){   
245.             iHeight = this._mxScaleHeight;   
246.             iWidth = this.RepairScaleWidth(iHeight);   
247.         }else if(this.Min && iHeight < this.minHeight){   
248.             var tWidth = this.RepairScaleWidth(this.minHeight);   
249.             if(tWidth < mxWidth){ iHeight = this.minHeight; iWidth = tWidth; }   
250.         }   
251.         this._styleHeight = iHeight;   
252.         this._styleTop = this._scaleTop - iHeight / 2;   
253.     }   
254.     this._styleWidth = iWidth;   
255.   },   
256.   //垂直方向   
257.   RepairY: function(iHeight, mxHeight) {   
258.     iHeight = this.RepairHeight(iHeight, mxHeight);   
259.     if(this.Scale){   
260.         var iWidth = this.RepairScaleWidth(iHeight);   
261.         if(this.Max && iWidth > this._mxScaleWidth){   
262.             iWidth = this._mxScaleWidth;   
263.             iHeight = this.RepairScaleHeight(iWidth);   
264.         }else if(this.Min && iWidth < this.minWidth){   
265.             var tHeight = this.RepairScaleHeight(this.minWidth);   
266.             if(tHeight < mxHeight){ iWidth = this.minWidth; iHeight = tHeight; }   
267.         }   
268.         this._styleWidth = iWidth;   
269.         this._styleLeft = this._scaleLeft - iWidth / 2;   
270.     }   
271.     this._styleHeight = iHeight;   
272.   },   
273.   //对角方向   
274.   RepairAngle: function(iWidth, mxWidth, iHeight, mxHeight) {   
275.     iWidth = this.RepairWidth(iWidth, mxWidth);    
276.     if(this.Scale){   
277.         iHeight = this.RepairScaleHeight(iWidth);   
278.         if(this.Max && iHeight > mxHeight){   
279.             iHeight = mxHeight;   
280.             iWidth = this.RepairScaleWidth(iHeight);   
281.         }else if(this.Min && iHeight < this.minHeight){   
282.             var tWidth = this.RepairScaleWidth(this.minHeight);   
283.             if(tWidth < mxWidth){ iHeight = this.minHeight; iWidth = tWidth; }   
284.         }   
285.     }else{   
286.         iHeight = this.RepairHeight(iHeight, mxHeight);   
287.     }   
288.     this._styleWidth = iWidth;   
289.     this._styleHeight = iHeight;   
290.   },   
291.   //top   
292.   RepairTop: function() {   
293.     this._styleTop = this._fixTop - this._styleHeight;   
294.   },   
295.   //left   
296.   RepairLeft: function() {   
297.     this._styleLeft = this._fixLeft - this._styleWidth;   
298.   },   
299.   //height   
300.   RepairHeight: function(iHeight, mxHeight) {   
301.     iHeight = Math.min(this.Max ? mxHeight : iHeight, iHeight);   
302.     iHeight = Math.max(this.Min ? this.minHeight : iHeight, iHeight, 0);   
303.     return iHeight;   
304.   },   
305.   //width   
306.   RepairWidth: function(iWidth, mxWidth) {   
307.     iWidth = Math.min(this.Max ? mxWidth : iWidth, iWidth);   
308.     iWidth = Math.max(this.Min ? this.minWidth : iWidth, iWidth, 0);   
309.     return iWidth;   
310.   },   
311.   //比例高度   
312.   RepairScaleHeight: function(iWidth) {   
313.     return Math.max(Math.round((iWidth + this._borderX) / this.Ratio - this._borderY), 0);   
314.   },   
315.   //比例宽度   
316.   RepairScaleWidth: function(iHeight) {   
317.     return Math.max(Math.round((iHeight + this._borderY) * this.Ratio - this._borderX), 0);   
318.   },   
319.   //转向程序   
320.   //转右   
321.   TurnRight: function(fun) {   
322.     if(!(this.Min || this._styleWidth)){   
323.         this._fun = fun;   
324.         this._sideLeft = this._sideRight;   
325.         this.Max && this._mxSet();   
326.         return true;   
327.     }   
328.   },   
329.   //转左   
330.   TurnLeft: function(fun) {   
331.     if(!(this.Min || this._styleWidth)){   
332.         this._fun = fun;   
333.         this._sideRight = this._sideLeft;   
334.         this._fixLeft = this._styleLeft;   
335.         this.Max && this._mxSet();   
336.         return true;   
337.     }   
338.   },   
339.   //转上   
340.   TurnUp: function(fun) {   
341.     if(!(this.Min || this._styleHeight)){   
342.         this._fun = fun;   
343.         this._sideDown = this._sideUp;   
344.         this._fixTop = this._styleTop;   
345.         this.Max && this._mxSet();   
346.         return true;   
347.     }   
348.   },   
349.   //转下   
350.   TurnDown: function(fun) {   
351.     if(!(this.Min || this._styleHeight)){   
352.         this._fun = fun;   
353.         this._sideUp = this._sideDown;   
354.         this.Max && this._mxSet();   
355.         return true;   
356.     }   
357.   },   
358.   //停止缩放   
359.   Stop: function() {   
360.     removeEventHandler(document, "mousemove", this._fR);   
361.     removeEventHandler(document, "mouseup", this._fS);   
362.     if(isIE){   
363.         removeEventHandler(this._obj, "losecapture", this._fS);   
364.         this._obj.releaseCapture();   
365.     }else{   
366.         removeEventHandler(window, "blur", this._fS);   
367.     }   
368.   }   
369. };  

//缩放程序
var Resize = Class.create();
Resize.prototype = {
  //缩放对象
  initialize: function(obj, options) {
	this._obj = $(obj);//缩放对象
	
	this._styleWidth = this._styleHeight = this._styleLeft = this._styleTop = 0;//样式参数
	this._sideRight = this._sideDown = this._sideLeft = this._sideUp = 0;//坐标参数
	this._fixLeft = this._fixTop = 0;//定位参数
	this._scaleLeft = this._scaleTop = 0;//定位坐标
	
	this._mxSet = function(){};//范围设置程序
	this._mxRightWidth = this._mxDownHeight = this._mxUpHeight = this._mxLeftWidth = 0;//范围参数
	this._mxScaleWidth = this._mxScaleHeight = 0;//比例范围参数
	
	this._fun = function(){};//缩放执行程序
	
	//获取边框宽度
	var _style = CurrentStyle(this._obj);
	this._borderX = (parseInt(_style.borderLeftWidth) || 0) + (parseInt(_style.borderRightWidth) || 0);
	this._borderY = (parseInt(_style.borderTopWidth) || 0) + (parseInt(_style.borderBottomWidth) || 0);
	//事件对象(用于绑定移除事件)
	this._fR = BindAsEventListener(this, this.Resize);
	this._fS = Bind(this, this.Stop);
	
	this.SetOptions(options);
	//范围限制
	this.Max = !!this.options.Max;
	this._mxContainer = $(this.options.mxContainer) || null;
	this.mxLeft = Math.round(this.options.mxLeft);
	this.mxRight = Math.round(this.options.mxRight);
	this.mxTop = Math.round(this.options.mxTop);
	this.mxBottom = Math.round(this.options.mxBottom);
	//宽高限制
	this.Min = !!this.options.Min;
	this.minWidth = Math.round(this.options.minWidth);
	this.minHeight = Math.round(this.options.minHeight);
	//按比例缩放
	this.Scale = !!this.options.Scale;
	this.Ratio = Math.max(this.options.Ratio, 0);
	
	this.onResize = this.options.onResize;
	
	this._obj.style.position = "absolute";
	!this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || (this._mxContainer.style.position = "relative");
  },
  //设置默认属性
  SetOptions: function(options) {
    this.options = {//默认值
		Max:		false,//是否设置范围限制(为true时下面mx参数有用)
		mxContainer:"",//指定限制在容器内
		mxLeft:		0,//左边限制
		mxRight:	9999,//右边限制
		mxTop:		0,//上边限制
		mxBottom:	9999,//下边限制
		Min:		false,//是否最小宽高限制(为true时下面min参数有用)
		minWidth:	50,//最小宽度
		minHeight:	50,//最小高度
		Scale:		false,//是否按比例缩放
		Ratio:		0,//缩放比例(宽/高)
		onResize:	function(){}//缩放时执行
    };
    Extend(this.options, options || {});
  },
  //设置触发对象
  Set: function(resize, side) {
	var resize = $(resize), fun;
	if(!resize) return;
	//根据方向设置
	switch (side.toLowerCase()) {
	case "up" :
		fun = this.Up;
		break;
	case "down" :
		fun = this.Down;
		break;
	case "left" :
		fun = this.Left;
		break;
	case "right" :
		fun = this.Right;
		break;
	case "left-up" :
		fun = this.LeftUp;
		break;
	case "right-up" :
		fun = this.RightUp;
		break;
	case "left-down" :
		fun = this.LeftDown;
		break;
	case "right-down" :
	default :
		fun = this.RightDown;
	};
	//设置触发对象
	addEventHandler(resize, "mousedown", BindAsEventListener(this, this.Start, fun));
  },
  //准备缩放
  Start: function(e, fun, touch) {	
	//防止冒泡(跟拖放配合时设置)
	e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true);
	//设置执行程序
	this._fun = fun;
	//样式参数值
	this._styleWidth = this._obj.clientWidth;
	this._styleHeight = this._obj.clientHeight;
	this._styleLeft = this._obj.offsetLeft;
	this._styleTop = this._obj.offsetTop;
	//四条边定位坐标
	this._sideLeft = e.clientX - this._styleWidth;
	this._sideRight = e.clientX + this._styleWidth;
	this._sideUp = e.clientY - this._styleHeight;
	this._sideDown = e.clientY + this._styleHeight;
	//top和left定位参数
	this._fixLeft = this._styleLeft + this._styleWidth;
	this._fixTop = this._styleTop + this._styleHeight;
	//缩放比例
	if(this.Scale){
		//设置比例
		this.Ratio = Math.max(this.Ratio, 0) || this._styleWidth / this._styleHeight;
		//left和top的定位坐标
		this._scaleLeft = this._styleLeft + this._styleWidth / 2;
		this._scaleTop = this._styleTop + this._styleHeight / 2;
	};
	//范围限制
	if(this.Max){
		//设置范围参数
		var mxLeft = this.mxLeft, mxRight = this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom;
		//如果设置了容器，再修正范围参数
		if(!!this._mxContainer){
			mxLeft = Math.max(mxLeft, 0);
			mxTop = Math.max(mxTop, 0);
			mxRight = Math.min(mxRight, this._mxContainer.clientWidth);
			mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight);
		};
		//根据最小值再修正
		mxRight = Math.max(mxRight, mxLeft + (this.Min ? this.minWidth : 0) + this._borderX);
		mxBottom = Math.max(mxBottom, mxTop + (this.Min ? this.minHeight : 0) + this._borderY);
		//由于转向时要重新设置所以写成function形式
		this._mxSet = function(){
			this._mxRightWidth = mxRight - this._styleLeft - this._borderX;
			this._mxDownHeight = mxBottom - this._styleTop - this._borderY;
			this._mxUpHeight = Math.max(this._fixTop - mxTop, this.Min ? this.minHeight : 0);
			this._mxLeftWidth = Math.max(this._fixLeft - mxLeft, this.Min ? this.minWidth : 0);
		};
		this._mxSet();
		//有缩放比例下的范围限制
		if(this.Scale){
			this._mxScaleWidth = Math.min(this._scaleLeft - mxLeft, mxRight - this._scaleLeft - this._borderX) * 2;
			this._mxScaleHeight = Math.min(this._scaleTop - mxTop, mxBottom - this._scaleTop - this._borderY) * 2;
		};
	};
	//mousemove时缩放 mouseup时停止
	addEventHandler(document, "mousemove", this._fR);
	addEventHandler(document, "mouseup", this._fS);
	if(isIE){
		addEventHandler(this._obj, "losecapture", this._fS);
		this._obj.setCapture();
	}else{
		addEventHandler(window, "blur", this._fS);
		e.preventDefault();
	};
  },
  //缩放
  Resize: function(e) {
	//清除选择
	window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
	//执行缩放程序
	this._fun(e);
	//设置样式，变量必须大于等于0否则ie出错
	with(this._obj.style){
		width = this._styleWidth + "px"; height = this._styleHeight + "px";
		top = this._styleTop + "px"; left = this._styleLeft + "px";
	}
	//附加程序
	this.onResize();
  },
  //缩放程序
  //上
  Up: function(e) {
	this.RepairY(this._sideDown - e.clientY, this._mxUpHeight);
	this.RepairTop();
	this.TurnDown(this.Down);
  },
  //下
  Down: function(e) {
	this.RepairY(e.clientY - this._sideUp, this._mxDownHeight);
	this.TurnUp(this.Up);
  },
  //右
  Right: function(e) {
	this.RepairX(e.clientX - this._sideLeft, this._mxRightWidth);
	this.TurnLeft(this.Left);
  },
  //左
  Left: function(e) {
	this.RepairX(this._sideRight - e.clientX, this._mxLeftWidth);
	this.RepairLeft();
	this.TurnRight(this.Right);
  },
  //右下
  RightDown: function(e) {
	this.RepairAngle(
		e.clientX - this._sideLeft, this._mxRightWidth,
		e.clientY - this._sideUp, this._mxDownHeight
	);
	this.TurnLeft(this.LeftDown) || this.Scale || this.TurnUp(this.RightUp);
  },
  //右上
  RightUp: function(e) {
	this.RepairAngle(
		e.clientX - this._sideLeft, this._mxRightWidth,
		this._sideDown - e.clientY, this._mxUpHeight
	);
	this.RepairTop();
	this.TurnLeft(this.LeftUp) || this.Scale || this.TurnDown(this.RightDown);
  },
  //左下
  LeftDown: function(e) {
	this.RepairAngle(
		this._sideRight - e.clientX, this._mxLeftWidth,
		e.clientY - this._sideUp, this._mxDownHeight
	);
	this.RepairLeft();
	this.TurnRight(this.RightDown) || this.Scale || this.TurnUp(this.LeftUp);
  },
  //左上
  LeftUp: function(e) {
	this.RepairAngle(
		this._sideRight - e.clientX, this._mxLeftWidth,
		this._sideDown - e.clientY, this._mxUpHeight
	);
	this.RepairTop(); this.RepairLeft();
	this.TurnRight(this.RightUp) || this.Scale || this.TurnDown(this.LeftDown);
  },
  //修正程序
  //水平方向
  RepairX: function(iWidth, mxWidth) {
	iWidth = this.RepairWidth(iWidth, mxWidth);
	if(this.Scale){
		var iHeight = this.RepairScaleHeight(iWidth);
		if(this.Max && iHeight > this._mxScaleHeight){
			iHeight = this._mxScaleHeight;
			iWidth = this.RepairScaleWidth(iHeight);
		}else if(this.Min && iHeight < this.minHeight){
			var tWidth = this.RepairScaleWidth(this.minHeight);
			if(tWidth < mxWidth){ iHeight = this.minHeight; iWidth = tWidth; }
		}
		this._styleHeight = iHeight;
		this._styleTop = this._scaleTop - iHeight / 2;
	}
	this._styleWidth = iWidth;
  },
  //垂直方向
  RepairY: function(iHeight, mxHeight) {
	iHeight = this.RepairHeight(iHeight, mxHeight);
	if(this.Scale){
		var iWidth = this.RepairScaleWidth(iHeight);
		if(this.Max && iWidth > this._mxScaleWidth){
			iWidth = this._mxScaleWidth;
			iHeight = this.RepairScaleHeight(iWidth);
		}else if(this.Min && iWidth < this.minWidth){
			var tHeight = this.RepairScaleHeight(this.minWidth);
			if(tHeight < mxHeight){ iWidth = this.minWidth; iHeight = tHeight; }
		}
		this._styleWidth = iWidth;
		this._styleLeft = this._scaleLeft - iWidth / 2;
	}
	this._styleHeight = iHeight;
  },
  //对角方向
  RepairAngle: function(iWidth, mxWidth, iHeight, mxHeight) {
	iWidth = this.RepairWidth(iWidth, mxWidth);	
	if(this.Scale){
		iHeight = this.RepairScaleHeight(iWidth);
		if(this.Max && iHeight > mxHeight){
			iHeight = mxHeight;
			iWidth = this.RepairScaleWidth(iHeight);
		}else if(this.Min && iHeight < this.minHeight){
			var tWidth = this.RepairScaleWidth(this.minHeight);
			if(tWidth < mxWidth){ iHeight = this.minHeight; iWidth = tWidth; }
		}
	}else{
		iHeight = this.RepairHeight(iHeight, mxHeight);
	}
	this._styleWidth = iWidth;
	this._styleHeight = iHeight;
  },
  //top
  RepairTop: function() {
	this._styleTop = this._fixTop - this._styleHeight;
  },
  //left
  RepairLeft: function() {
	this._styleLeft = this._fixLeft - this._styleWidth;
  },
  //height
  RepairHeight: function(iHeight, mxHeight) {
	iHeight = Math.min(this.Max ? mxHeight : iHeight, iHeight);
	iHeight = Math.max(this.Min ? this.minHeight : iHeight, iHeight, 0);
	return iHeight;
  },
  //width
  RepairWidth: function(iWidth, mxWidth) {
	iWidth = Math.min(this.Max ? mxWidth : iWidth, iWidth);
	iWidth = Math.max(this.Min ? this.minWidth : iWidth, iWidth, 0);
	return iWidth;
  },
  //比例高度
  RepairScaleHeight: function(iWidth) {
	return Math.max(Math.round((iWidth + this._borderX) / this.Ratio - this._borderY), 0);
  },
  //比例宽度
  RepairScaleWidth: function(iHeight) {
	return Math.max(Math.round((iHeight + this._borderY) * this.Ratio - this._borderX), 0);
  },
  //转向程序
  //转右
  TurnRight: function(fun) {
	if(!(this.Min || this._styleWidth)){
		this._fun = fun;
		this._sideLeft = this._sideRight;
		this.Max && this._mxSet();
		return true;
	}
  },
  //转左
  TurnLeft: function(fun) {
	if(!(this.Min || this._styleWidth)){
		this._fun = fun;
		this._sideRight = this._sideLeft;
		this._fixLeft = this._styleLeft;
		this.Max && this._mxSet();
		return true;
	}
  },
  //转上
  TurnUp: function(fun) {
	if(!(this.Min || this._styleHeight)){
		this._fun = fun;
		this._sideDown = this._sideUp;
		this._fixTop = this._styleTop;
		this.Max && this._mxSet();
		return true;
	}
  },
  //转下
  TurnDown: function(fun) {
	if(!(this.Min || this._styleHeight)){
		this._fun = fun;
		this._sideUp = this._sideDown;
		this.Max && this._mxSet();
		return true;
	}
  },
  //停止缩放
  Stop: function() {
	removeEventHandler(document, "mousemove", this._fR);
	removeEventHandler(document, "mouseup", this._fS);
	if(isIE){
		removeEventHandler(this._obj, "losecapture", this._fS);
		this._obj.releaseCapture();
	}else{
		removeEventHandler(window, "blur", this._fS);
	}
  }
};

ImgCropper.htm 代码如下:

Java代码  

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
2. <html xmlns="http://www.w3.org/1999/xhtml">   
3. <head>   
4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   
5. <title>JavaScript 图片截取效果</title>   
6. </head>   
7. <body>   
8. <script type="text/javascript">   
9. var isIE = (document.all) ? true : false;   
10.   
11. var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);   
12.   
13. var $ = function (id) {   
14.     return "string" == typeof id ? document.getElementById(id) : id;   
15. };   
16.   
17. var Class = {   
18.     create: function() {   
19.         return function() { this.initialize.apply(this, arguments); }   
20.     }   
21. }   
22.   
23. var Extend = function(destination, source) {   
24.     for (var property in source) {   
25.         destination[property] = source[property];   
26.     }   
27. }   
28.   
29. var Bind = function(object, fun) {   
30.     return function() {   
31.         return fun.apply(object, arguments);   
32.     }   
33. }   
34.   
35. var BindAsEventListener = function(object, fun) {   
36.     var args = Array.prototype.slice.call(arguments).slice(2);   
37.     return function(event) {   
38.         return fun.apply(object, [event || window.event].concat(args));   
39.     }   
40. }   
41.   
42. var CurrentStyle = function(element){   
43.     return element.currentStyle || document.defaultView.getComputedStyle(element, null);   
44. }   
45.   
46. function addEventHandler(oTarget, sEventType, fnHandler) {   
47.     if (oTarget.addEventListener) {   
48.         oTarget.addEventListener(sEventType, fnHandler, false);   
49.     } else if (oTarget.attachEvent) {   
50.         oTarget.attachEvent("on" + sEventType, fnHandler);   
51.     } else {   
52.         oTarget["on" + sEventType] = fnHandler;   
53.     }   
54. };   
55.   
56. function removeEventHandler(oTarget, sEventType, fnHandler) {   
57.     if (oTarget.removeEventListener) {   
58.         oTarget.removeEventListener(sEventType, fnHandler, false);   
59.     } else if (oTarget.detachEvent) {   
60.         oTarget.detachEvent("on" + sEventType, fnHandler);   
61.     } else {    
62.         oTarget["on" + sEventType] = null;   
63.     }   
64. };   
65.   
66. //图片切割   
67. var ImgCropper = Class.create();   
68. ImgCropper.prototype = {   
69.   //容器对象,控制层,图片地址   
70.   initialize: function(container, handle, url, options) {   
71.     this._Container = $(container);//容器对象   
72.     this._layHandle = $(handle);//控制层   
73.     this.Url = url;//图片地址   
74.        
75.     this._layBase = this._Container.appendChild(document.createElement("img"));//底层   
76.     this._layCropper = this._Container.appendChild(document.createElement("img"));//切割层   
77.     this._layCropper.onload = Bind(this, this.SetPos);   
78.     //用来设置大小   
79.     this._tempImg = document.createElement("img");   
80.     this._tempImg.onload = Bind(this, this.SetSize);   
81.        
82.     this.SetOptions(options);   
83.        
84.     this.Opacity = Math.round(this.options.Opacity);   
85.     this.Color = this.options.Color;   
86.     this.Scale = !!this.options.Scale;   
87.     this.Ratio = Math.max(this.options.Ratio, 0);   
88.     this.Width = Math.round(this.options.Width);   
89.     this.Height = Math.round(this.options.Height);   
90.        
91.     //设置预览对象   
92.     var oPreview = $(this.options.Preview);//预览对象   
93.     if(oPreview){   
94.         oPreview.style.position = "relative";   
95.         oPreview.style.overflow = "hidden";   
96.         this.viewWidth = Math.round(this.options.viewWidth);   
97.         this.viewHeight = Math.round(this.options.viewHeight);   
98.         //预览图片对象   
99.         this._view = oPreview.appendChild(document.createElement("img"));   
100.         this._view.style.position = "absolute";   
101.         this._view.onload = Bind(this, this.SetPreview);   
102.     }   
103.     //设置拖放   
104.     this._drag = new Drag(this._layHandle, { Limit: true, onMove: Bind(this, this.SetPos), Transparent: true });   
105.     //设置缩放   
106.     this.Resize = !!this.options.Resize;   
107.     if(this.Resize){   
108.         var op = this.options, _resize = new Resize(this._layHandle, { Max: true, onResize: Bind(this, this.SetPos) });   
109.         //设置缩放触发对象   
110.         op.RightDown && (_resize.Set(op.RightDown, "right-down"));   
111.         op.LeftDown && (_resize.Set(op.LeftDown, "left-down"));   
112.         op.RightUp && (_resize.Set(op.RightUp, "right-up"));   
113.         op.LeftUp && (_resize.Set(op.LeftUp, "left-up"));   
114.         op.Right && (_resize.Set(op.Right, "right"));   
115.         op.Left && (_resize.Set(op.Left, "left"));   
116.         op.Down && (_resize.Set(op.Down, "down"));   
117.         op.Up && (_resize.Set(op.Up, "up"));   
118.         //最小范围限制   
119.         this.Min = !!this.options.Min;   
120.         this.minWidth = Math.round(this.options.minWidth);   
121.         this.minHeight = Math.round(this.options.minHeight);   
122.         //设置缩放对象   
123.         this._resize = _resize;   
124.     }   
125.     //设置样式   
126.     this._Container.style.position = "relative";   
127.     this._Container.style.overflow = "hidden";   
128.     this._layHandle.style.zIndex = 200;   
129.     this._layCropper.style.zIndex = 100;   
130.     this._layBase.style.position = this._layCropper.style.position = "absolute";   
131.     this._layBase.style.top = this._layBase.style.left = this._layCropper.style.top = this._layCropper.style.left = 0;//对齐   
132.     //初始化设置   
133.     this.Init();   
134.   },   
135.   //设置默认属性   
136.   SetOptions: function(options) {   
137.     this.options = {//默认值   
138.         Opacity:    50,//透明度(0到100)   
139.         Color:      "",//背景色   
140.         Width:      0,//图片高度   
141.         Height:     0,//图片高度   
142.         //缩放触发对象   
143.         Resize:     false,//是否设置缩放   
144.         Right:      "",//右边缩放对象   
145.         Left:       "",//左边缩放对象   
146.         Up:         "",//上边缩放对象   
147.         Down:       "",//下边缩放对象   
148.         RightDown:  "",//右下缩放对象   
149.         LeftDown:   "",//左下缩放对象   
150.         RightUp:    "",//右上缩放对象   
151.         LeftUp:     "",//左上缩放对象   
152.         Min:        false,//是否最小宽高限制(为true时下面min参数有用)   
153.         minWidth:   50,//最小宽度   
154.         minHeight:  50,//最小高度   
155.         Scale:      false,//是否按比例缩放   
156.         Ratio:      0,//缩放比例(宽/高)   
157.         //预览对象设置   
158.         Preview:    "",//预览对象   
159.         viewWidth:  0,//预览宽度   
160.         viewHeight: 0//预览高度   
161.     };   
162.     Extend(this.options, options || {});   
163.   },   
164.   //初始化对象   
165.   Init: function() {   
166.     //设置背景色   
167.     this.Color && (this._Container.style.backgroundColor = this.Color);   
168.     //设置图片   
169.     this._tempImg.src = this._layBase.src = this._layCropper.src = this.Url;   
170.     //设置透明   
171.     if(isIE){   
172.         this._layBase.style.filter = "alpha(opacity:" + this.Opacity + ")";   
173.     } else {   
174.         this._layBase.style.opacity = this.Opacity / 100;   
175.     }   
176.     //设置预览对象   
177.     this._view && (this._view.src = this.Url);   
178.     //设置缩放   
179.     if(this.Resize){   
180.         with(this._resize){   
181.             Scale = this.Scale; Ratio = this.Ratio; Min = this.Min; minWidth = this.minWidth; minHeight = this.minHeight;   
182.         }   
183.     }   
184.   },   
185.   //设置切割样式   
186.   SetPos: function() {   
187.     //ie6渲染bug   
188.     if(isIE6){ with(this._layHandle.style){ zoom = .9; zoom = 1; }; };   
189.     //获取位置参数   
190.     var p = this.GetPos();   
191.     //按拖放对象的参数进行切割   
192.     this._layCropper.style.clip = "rect(" + p.Top + "px " + (p.Left + p.Width) + "px " + (p.Top + p.Height) + "px " + p.Left + "px)";   
193.     //设置预览   
194.     this.SetPreview();   
195.   },   
196.   //设置预览效果   
197.   SetPreview: function() {   
198.     if(this._view){   
199.         //预览显示的宽和高   
200.         var p = this.GetPos(), s = this.GetSize(p.Width, p.Height, this.viewWidth, this.viewHeight), scale = s.Height / p.Height;   
201.         //按比例设置参数   
202.         var pHeight = this._layBase.height * scale, pWidth = this._layBase.width * scale, pTop = p.Top * scale, pLeft = p.Left * scale;   
203.         //设置预览对象   
204.         with(this._view.style){   
205.             //设置样式   
206.             width = pWidth + "px"; height = pHeight + "px"; top = - pTop + "px "; left = - pLeft + "px";   
207.             //切割预览图   
208.             clip = "rect(" + pTop + "px " + (pLeft + s.Width) + "px " + (pTop + s.Height) + "px " + pLeft + "px)";   
209.         }   
210.     }   
211.   },   
212.   //设置图片大小   
213.   SetSize: function() {   
214.     var s = this.GetSize(this._tempImg.width, this._tempImg.height, this.Width, this.Height);   
215.     //设置底图和切割图   
216.     this._layBase.style.width = this._layCropper.style.width = s.Width + "px";   
217.     this._layBase.style.height = this._layCropper.style.height = s.Height + "px";   
218.     //设置拖放范围   
219.     this._drag.mxRight = s.Width; this._drag.mxBottom = s.Height;   
220.     //设置缩放范围   
221.     if(this.Resize){ this._resize.mxRight = s.Width; this._resize.mxBottom = s.Height; }   
222.   },   
223.   //获取当前样式   
224.   GetPos: function() {   
225.     with(this._layHandle){   
226.         return { Top: offsetTop, Left: offsetLeft, Width: offsetWidth, Height: offsetHeight }   
227.     }   
228.   },   
229.   //获取尺寸   
230.   GetSize: function(nowWidth, nowHeight, fixWidth, fixHeight) {   
231.     var iWidth = nowWidth, iHeight = nowHeight, scale = iWidth / iHeight;   
232.     //按比例设置   
233.     if(fixHeight){ iWidth = (iHeight = fixHeight) * scale; }   
234.     if(fixWidth && (!fixHeight || iWidth > fixWidth)){ iHeight = (iWidth = fixWidth) / scale; }   
235.     //返回尺寸对象   
236.     return { Width: iWidth, Height: iHeight }   
237.   }   
238. }   
239. </script>   
240. <script type="text/javascript" src="Drag.js"></script>   
241. <script type="text/javascript" src="Resize.js"></script>   
242. <style type="text/css">   
243. #rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{   
244.     position:absolute;   
245.     background:#FFF;   
246.     border: 1px solid #333;   
247.     width: 6px;   
248.     height: 6px;   
249.     z-index:500;   
250.     font-size:0;   
251.     opacity: 0.5;   
252.     filter:alpha(opacity=50);   
253. }   
254.   
255. #rLeftDown,#rRightUp{cursor:ne-resize;}   
256. #rRightDown,#rLeftUp{cursor:nw-resize;}   
257. #rRight,#rLeft{cursor:e-resize;}   
258. #rUp,#rDown{cursor:n-resize;}   
259.   
260. #rLeftDown{left:-4px;bottom:-4px;}   
261. #rRightUp{right:-4px;top:-4px;}   
262. #rRightDown{right:-4px;bottom:-4px;background-color:#00F;}   
263. #rLeftUp{left:-4px;top:-4px;}   
264. #rRight{right:-4px;top:50%;margin-top:-4px;}   
265. #rLeft{left:-4px;top:50%;margin-top:-4px;}   
266. #rUp{top:-4px;left:50%;margin-left:-4px;}   
267. #rDown{bottom:-4px;left:50%;margin-left:-4px;}   
268.   
269. #bgDiv{width:300px; height:400px; border:1px solid #666666; position:relative;}   
270. #dragDiv{border:1px dashed #fff; width:100px; height:60px; top:50px; left:50px; cursor:move; }   
271. </style>   
272. <table width="700" border="0" cellspacing="0" cellpadding="0">   
273.   <tr>   
274.     <td width="300"><div id="bgDiv">   
275.         <div id="dragDiv">   
276.           <div id="rRightDown"> </div>   
277.           <div id="rLeftDown"> </div>   
278.           <div id="rRightUp"> </div>   
279.           <div id="rLeftUp"> </div>   
280.           <div id="rRight"> </div>   
281.           <div id="rLeft"> </div>   
282.           <div id="rUp"> </div>   
283.           <div id="rDown"></div>   
284.         </div>   
285.       </div></td>   
286.     <td align="center"><div id="viewDiv" style="width:300px; height:300px;"> </div></td>   
287.   </tr>   
288. </table>   
289. <br />   
290. <input id="idSize" type="button" value="缩小显示" />   
291. <input id="idOpacity" type="button" value="全透明" />   
292. <input id="idColor" type="button" value="白色背景" />   
293. <input id="idScale" type="button" value="使用比例" />   
294. <input id="idMin" type="button" value="设置最小尺寸" />   
295. <input id="idView" type="button" value="缩小预览" />   
296. <input id="idImg" type="button" value="换图片" />   
297. <br /><br />   
298. 图片地址：<input id="idPicUrl" type="text" value="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_mm14.jpg" />   
299. <input id="idPic" type="button" value="换图" />   
300. <script>   
301.   
302. var ic = new ImgCropper("bgDiv", "dragDiv", "http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_xx2.jpg", {   
303.     Width: 300, Height: 400, Color: "#000",   
304.     Resize: true,   
305.     Right: "rRight", Left: "rLeft", Up: "rUp", Down: "rDown",   
306.     RightDown: "rRightDown", LeftDown: "rLeftDown", RightUp: "rRightUp", LeftUp: "rLeftUp",   
307.     Preview: "viewDiv", viewWidth: 300, viewHeight: 300  
308. })   
309.   
310. $("idSize").onclick = function(){   
311.     if(ic.Height == 200){   
312.         ic.Height = 400;   
313.         this.value = "缩小显示";   
314.     }else{   
315.         ic.Height = 200;   
316.         this.value = "还原显示";   
317.     }   
318.     ic.Init();   
319. }   
320.   
321. $("idOpacity").onclick = function(){   
322.     if(ic.Opacity == 0){   
323.         ic.Opacity = 50;   
324.         this.value = "全透明";   
325.     }else{   
326.         ic.Opacity = 0;   
327.         this.value = "半透明";   
328.     }   
329.     ic.Init();   
330. }   
331.   
332. $("idColor").onclick = function(){   
333.     if(ic.Color == "#000"){   
334.         ic.Color = "#fff";   
335.         this.value = "白色背景";   
336.     }else{   
337.         ic.Color = "#000";   
338.         this.value = "黑色背景";   
339.     }   
340.     ic.Init();   
341. }   
342.   
343. $("idScale").onclick = function(){   
344.     if(ic.Scale){   
345.         ic.Scale = false;   
346.         this.value = "使用比例";   
347.     }else{   
348.         ic.Scale = true;   
349.         this.value = "取消比例";   
350.     }   
351.     ic.Init();   
352. }   
353.   
354. $("idMin").onclick = function(){   
355.     if(ic.Min){   
356.         ic.Min = false;   
357.         this.value = "设置最小尺寸";   
358.     }else{   
359.         ic.Min = true;   
360.         this.value = "取消最小尺寸";   
361.     }   
362.     ic.Init();   
363. }   
364.   
365. $("idView").onclick = function(){   
366.     if(ic.viewWidth == 200){   
367.         ic.viewWidth = 300;   
368.         this.value = "缩小预览";   
369.     }else{   
370.         ic.viewWidth = 200;   
371.         this.value = "扩大预览";   
372.     }   
373.     ic.Init();   
374. }   
375.   
376. $("idImg").onclick = function(){   
377.     if(ic.Url == "http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_xx2.jpg"){   
378.         ic.Url = "http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_min.jpg";   
379.     }else{   
380.         ic.Url = "http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_xx2.jpg";   
381.     }   
382.     ic.Init();   
383. }   
384.   
385. $("idPic").onclick = function(){   
386.     if($("idPicUrl").value){   
387.         ic.Url = $("idPicUrl").value;   
388.     }   
389.     ic.Init();   
390. }   
391. </script>   
392. </body>   
393. </html>  

 

http://www.iteye.com/problems/45490