java4.txt

JavaScript 图片切割效果（带拖放、缩放效果）（备注：自己复制就可以使用）

				window.getSelection().removeAllRanges();
			}
			//执行缩放程序和附加程序
			this._fun(Event(e));
			this.onResize();
		},
		//右边
		SetRight : function(oEvent) {
			//右边和下边只要设置宽度和高度就行
			//当前坐标位置减去左边的坐标等于当前宽度
			var iWidth = oEvent.clientX - this._left;
			//当少于最少宽度
			if (iWidth < this.MinWidth) {
				iWidth = this.MinWidth;
			}
			//当超过当前设定的最大宽度
			if (this.Limit && iWidth > this._mxRight) {
				iWidth = this._mxRight;
			}
			//设置宽度
			this._obj.style.width = iWidth + "px";
		},
		//下边
		SetDown : function(oEvent) {
			var iHeight = oEvent.clientY - this._top;
			if (iHeight < this.MinHeight) {
				iHeight = this.MinHeight;
			}
			if (this.Limit && iHeight > this._mxDown) {
				iHeight = this._mxDown;
			}
			this._obj.style.height = iHeight + "px";
		},
		//左边
		SetLeft : function(oEvent) {
			//左边和上边比较麻烦 因为还要计算left和top
			//右边的坐标减去当前坐标位置等于当前宽度
			var iWidth = this._right - oEvent.clientX;
			//当少于最少宽度
			if (iWidth < this.MinWidth) {
				iWidth = this.MinWidth;
			}
			//当超过当前设定的最大宽度
			if (this.Limit && iWidth > this._mxLeft) {
				iWidth = this._mxLeft;
			}
			//设置宽度和left
			this._obj.style.left = this._obj.offsetLeft
					+ parseInt(this._obj.style.width) - iWidth + "px";
			this._obj.style.width = iWidth + "px";
		},
		//上边
		SetUp : function(oEvent) {
			var iHeight = this._bottom - oEvent.clientY;
			if (iHeight < this.MinHeight)
				iHeight = this.MinHeight;
			if (this.Limit && iHeight > this._mxUp) {
				iHeight = this._mxUp;
			}
			this._obj.style.top = this._obj.offsetTop
					+ parseInt(this._obj.style.height) - iHeight + "px";
			this._obj.style.height = iHeight + "px";
		},
		//停止缩放
		Stop : function() {
			//移除事件
			removeEventHandler(document, "mousemove", this._fR);
			removeEventHandler(document, "mouseup", this._fS);
		}
	};

	//图片切割
	var ImgCropper = Class.create();
	ImgCropper.prototype = {
		//容器对象,拖放缩放对象,图片地址,宽度,高度
		initialize : function(container, drag, url, width, height, options) {
			var oThis = this;

			this.Container = $(container);//容器对象
			this.Drag = $(drag);//拖放对象
			//用一个透明的层填充拖放对象 不填充的话onmousedown会失效(未知原因)
			( function(o) {
				o.style.width = o.style.height = "100%";
				o.style.backgroundColor = "#fff";
				if (isIE) {
					o.style.filter = "alpha(opacity:0)";
				} else {
					o.style.opacity = 0;
				}
			})(this.Drag.appendChild(document.createElement("div")))

			this._pic = this.Container.appendChild(document
					.createElement("img"));//图片对象
			this._cropper = this.Container.appendChild(document
					.createElement("img"));//切割对象
			this._cropper.onload = function() {
				oThis.SetPos();
			}

			this.Url = url;//图片地址
			this.Width = parseInt(width);//宽度
			this.Height = parseInt(height);//高度

			this.SetOptions(options);

			this.Opacity = parseInt(this.options.Opacity);
			this.dragTop = parseInt(this.options.dragTop);
			this.dragLeft = parseInt(this.options.dragLeft);
			this.dragWidth = parseInt(this.options.dragWidth);
			this.dragHeight = parseInt(this.options.dragHeight);

			//设置预览对象
			this.View = $(this.options.View) || null;//预览对象
			this.viewWidth = parseInt(this.options.viewWidth);
			this.viewHeight = parseInt(this.options.viewHeight);
			this._view = null;//预览图片对象
			if (this.View) {
				this._view = this.View.appendChild(document
						.createElement("img"));
			}

			//设置拖放
			this._drag = new Drag(this.Drag, this.Drag, {
				Limit :true,
				onMove : function() {
					oThis.SetPos();
				}
			});
			//设置缩放
			this._resize = this.GetResize();

			this.Init();
		},
		//设置默认属性
		SetOptions : function(options) {
			this.options = {//默认值
				Opacity :50,//透明度(0到100)
				//拖放位置和宽高
				dragTop :0,
				dragLeft :0,
				dragWidth :100,
				dragHeight :100,
				//缩放触发对象
				Right :"",
				Left :"",
				Up :"",
				Down :"",
				RightDown :"",
				LeftDown :"",
				RightUp :"",
				LeftUp :"",
				//预览对象设置
				View :"",//预览对象
				viewWidth :100,//预览宽度
				viewHeight :100
			//预览高度
			};
			Object.extend(this.options, options || {});
		},
		//初始化对象
		Init : function() {
			var oThis = this;

			//设置容器
			this.Container.style.width = this.Width + "px";
			this.Container.style.height = this.Height + "px";
			this.Container.style.position = "relative";
			this.Container.style.overflow = "hidden";

			//设置拖放对象
			this.Drag.style.top = this.dragTop + "px";
			this.Drag.style.left = this.dragLeft + "px";
			this.Drag.style.width = this.dragWidth + "px";
			this.Drag.style.height = this.dragHeight + "px";
			this.Drag.style.zIndex = 200;
			//设置overflow解决ie6的渲染问题
			this.Drag.style.overflow = "hidden";

			//设置切割对象
			this._pic.src = this._cropper.src = this.Url;
			this._pic.style.width = this._cropper.style.width = this.Width
					+ "px";
			this._pic.style.height = this._cropper.style.height = this.Height
					+ "px";
			this._pic.style.position = this._cropper.style.position = "absolute";
			this._pic.style.top = this._pic.style.left = this._cropper.style.top = this._cropper.style.left = "0";
			if (isIE) {
				this._pic.style.filter = "alpha(opacity:" + this.Opacity + ")";
			} else {
				this._pic.style.opacity = this.Opacity / 100;
			}
			this._cropper.style.zIndex = 100;

			//设置预览对象
			if (this.View) {
				this.View.style.position = "relative";
				this.View.style.overflow = "hidden";
				this._view.style.position = "absolute";
				this._view.src = this.Url;
			}

			//设置拖放
			this._drag.mxRight = this.Width;
			this._drag.mxBottom = this.Height;
			//设置缩放
			if (this._resize) {
				this._resize.mxRight = this.Width,
						this._resize.mxBottom = this.Height
			}
		},
		//设置获取缩放对象
		GetResize : function() {
			var op = this.options;
			//有触发对象时才设置
			if (op.RightDown || op.LeftDown || op.RightUp || op.LeftUp
					|| op.Right || op.Left || op.Up || op.Down) {

				var oThis = this, _resize = new Resize(this.Drag, {
					Limit :true,
					onResize : function() {
						oThis.SetPos();
					}
				});
				//设置缩放触发对象
				if (op.RightDown) {
					_resize.Set(op.RightDown, "right-down");
				}
				if (op.LeftDown) {
					_resize.Set(op.LeftDown, "left-down");
				}

				if (op.RightUp) {
					_resize.Set(op.RightUp, "right-up");
				}
				if (op.LeftUp) {
					_resize.Set(op.LeftUp, "left-up");
				}

				if (op.Right) {
					_resize.Set(op.Right, "right");
				}
				if (op.Left) {
					_resize.Set(op.Left, "left");
				}

				if (op.Up) {
					_resize.Set(op.Up, "up");
				}
				if (op.Down) {
					_resize.Set(op.Down, "down");
				}

				return _resize;
			} else {
				return null;
			}
		},
		//设置切割
		SetPos : function() {
			var o = this.Drag;
			//按拖放对象的参数进行切割
			this._cropper.style.clip = "rect(" + o.offsetTop + "px "
					+ (o.offsetLeft + o.offsetWidth) + "px "
					+ (o.offsetTop + o.offsetHeight) + "px " + o.offsetLeft
					+ "px)";
			//图片预览
			if (this.View)
				this.PreView();
		},
		//图片预览
		PreView : function() {
			//按比例设置宽度和高度
			var o = this.Drag, h = this.viewWidth, w = h * o.offsetWidth
					/ o.offsetHeight;
			if (w > this.viewHeight) {
				w = this.viewHeight;
				h = w * o.offsetHeight / o.offsetWidth;
			}
			//获取对应比例尺寸
			var scale = h / o.offsetHeight, ph = this.Height * scale, pw = this.Width
					* scale, pt = o.offsetTop * scale, pl = o.offsetLeft
					* scale, styleView = this._view.style;
			//设置样式
			styleView.width = pw + "px";
			styleView.height = ph + "px";
			styleView.top = -pt + "px ";
			styleView.left = -pl + "px";
			//切割预览图
			styleView.clip = "rect(" + pt + "px " + (pl + w) + "px " + (pt + h)
					+ "px " + pl + "px)";
		}
	}
	var ic = new ImgCropper(
			"bgDiv",
			"dragDiv",
			"http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_xx2.jpg",
			300, 400, {
				dragTop :50,
				dragLeft :50,
				Right :"rRight",
				Left :"rLeft",
				Up :"rUp",
				Down :"rDown",
				RightDown :"rRightDown",
				LeftDown :"rLeftDown",
				RightUp :"rRightUp",
				LeftUp :"rLeftUp",
				View :"viewDiv",
				viewWidth :200,
				viewHeight :200
			})
</script><script>
	function Scale(w, h) {
		ic.Width = w;
		ic.Height = h;
		ic.Init();
	}
	function Pic(url) {
		ic.Url = url;
		ic.Init();
	}
	function Opacity(i) {
		ic.Opacity = i;
		ic.Init();
	}
</script><br />
<br />
<div><input onclick="Scale(400,400)" type="button" value=" 增肥 "
  name=""> <input onclick="Scale(300,400)" type="button"
  value=" 还原 " name=""></div>
<br />
<br />
<div><input
  onclick="Pic('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_min.jpg')"
  type="button" value=" 换图 " name=""> <input
  onclick="Pic('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_xx2.jpg')"
  type="button" value=" 还原 " name=""></div>
<br />
<br />
<div><input onclick="Opacity(0)" type="button" value=" 透明 "
  name=""> <input onclick="Opacity(50)" type="button"
  value=" 还原 " name=""></div>
</div>