imgcropper.htm

一些javascript效果 很值得学习

  //上边
  SetUp: function(oEvent) {
	this.repairUp(this._down - oEvent.clientY);
  },
  //比例缩放
  //比例缩放右下
  scaleRightDown: function(oEvent) {
	//先计算宽度然后按比例计算高度最后根据确定的高度计算宽度（宽度优先）
	this.SetRight(oEvent);
	this.repairDown(parseInt(this.style_width / this._scale));
	this.repairRight(parseInt(this.style_height * this._scale));
  },
  //比例缩放左下
  scaleLeftDown: function(oEvent) {
	this.SetLeft(oEvent);
	this.repairDown(parseInt(this.style_width / this._scale));
	this.repairLeft(parseInt(this.style_height * this._scale));
  },
  //比例缩放右上
  scaleRightUp: function(oEvent) {
	this.SetRight(oEvent);
	this.repairUp(parseInt(this.style_width / this._scale));
	this.repairRight(parseInt(this.style_height * this._scale));
  },
  //比例缩放左上
  scaleLeftUp: function(oEvent) {
	this.SetLeft(oEvent);
	this.repairUp(parseInt(this.style_width / this._scale));
	this.repairLeft(parseInt(this.style_height * this._scale));
  },
  //这里是高度优先用于上下两边(体验更好)
  //比例缩放下右
  scaleDownRight: function(oEvent) {
	this.SetDown(oEvent);
	this.repairRight(parseInt(this.style_height * this._scale));
	this.repairDown(parseInt(this.style_width / this._scale));
  },
  //比例缩放上右
  scaleUpRight: function(oEvent) {
	this.SetUp(oEvent);
	this.repairRight(parseInt(this.style_height * this._scale));
	this.repairUp(parseInt(this.style_width / this._scale));
  },
  //修正程序
  //修正右边
  repairRight: function(iWidth) {
	//右边和下边只要设置宽度和高度就行
	//当少于最少宽度
	if (iWidth < this.MinWidth){ iWidth = this.MinWidth; }
	//当超过当前设定的最大宽度
	if(this.Limit && iWidth > this._mxRight){ iWidth = this._mxRight; }
	//修改样式
	this.style_width = iWidth;
  },
  //修正下边
  repairDown: function(iHeight) {
	if (iHeight < this.MinHeight){ iHeight = this.MinHeight; }
	if(this.Limit && iHeight > this._mxDown){ iHeight = this._mxDown; }
	this.style_height = iHeight;
  },
  //修正左边
  repairLeft: function(iWidth) {
	//左边和上边比较麻烦 因为还要计算left和top
	//当少于最少宽度
	if (iWidth < this.MinWidth){ iWidth = this.MinWidth; }
	//当超过当前设定的最大宽度
	else if(this.Limit && iWidth > this._mxLeft){ iWidth = this._mxLeft; }
	//修改样式
	this.style_width = iWidth;
	this.style_left = this._obj.offsetLeft + this._obj.offsetWidth - iWidth;
  },
  //修正上边
  repairUp: function(iHeight) {
	if(iHeight < this.MinHeight){ iHeight = this.MinHeight; }
	else if(this.Limit && iHeight > this._mxUp){ iHeight = this._mxUp; }
	this.style_height = iHeight;
	this.style_top = this._obj.offsetTop + this._obj.offsetHeight - iHeight;
  },
  //停止缩放
  Stop: function() {
	//移除事件
	removeEventHandler(document, "mousemove", this._fR);
	removeEventHandler(document, "mouseup", this._fS);
	if(isIE){
		removeEventHandler(this._touch, "losecapture", this._fS);
		this._touch.releaseCapture();
	}else{
		removeEventHandler(window, "blur", this._fS);
	}
	this._touch = null;
  }
};


//图片切割
var ImgCropper = Class.create();
ImgCropper.prototype = {
  //容器对象,拖放缩放对象,图片地址,宽度,高度
  initialize: function(container, drag, url, width, height, options) {
	var oThis = this;
	
	//容器对象
	this.Container = $(container);
	this.Container.style.position = "relative";
	this.Container.style.overflow = "hidden";
	
	//拖放对象
	this.Drag = $(drag);
	this.Drag.style.cursor = "move";
	this.Drag.style.zIndex = 200;
	if(isIE){
		//设置overflow解决ie6的渲染问题(缩放时填充对象高度的问题)
		this.Drag.style.overflow = "hidden";
		//ie下用一个透明的层填充拖放对象 不填充的话onmousedown会失效(未知原因)
		(function(style){
			style.width = style.height = "100%"; style.backgroundColor = "#fff"; style.filter = "alpha(opacity:0)";
		})(this.Drag.appendChild(document.createElement("div")).style)
	}
	
	this._pic = this.Container.appendChild(document.createElement("img"));//图片对象
	this._cropper = this.Container.appendChild(document.createElement("img"));//切割对象
	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";//对齐
	this._cropper.style.zIndex = 100;
	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.style.position = "relative";
		this.View.style.overflow = "hidden";
		this._view = this.View.appendChild(document.createElement("img"));
		this._view.style.position = "absolute";
	}
	
	this.Scale = parseInt(this.options.Scale);
	
	//设置拖放
	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:		"",
		Scale:		false,//是否按比例缩放
		//预览对象设置
		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.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._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";
	if(isIE){
		this._pic.style.filter = "alpha(opacity:" + this.Opacity + ")";
	} else {
		this._pic.style.opacity = this.Opacity / 100;
	}
	
	//设置预览对象
	if(this.View){ 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; this._resize.Scale = this.Scale; }
  },
  //设置获取缩放对象
  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", "1.jpg", 400, 500, {
	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 Size(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();
}
//是否使用比例
function Scale(b){
	ic.Scale = b;
	ic.Init();
}


</script>
<br />
<br />
<div>
  <input name="" type="button" value=" 增肥 " onclick="Size(500,400)" />
  <input name="" type="button" value=" 还原 " onclick="Size(300,400)" />
</div>

<br />
<div>
  <input name="" type="button" value=" 换图 " onclick="Pic('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_min.jpg')" />
  <input name="" type="button" value=" 还原 " onclick="Pic('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_xx2.jpg')" />
</div>

<br />
<div>
  <input name="" type="button" value=" 透明 " onclick="Opacity(0)" />
  <input name="" type="button" value=" 还原 " onclick="Opacity(50)" />
</div>

<br />
<div>
  <input name="" type="button" value="使用比例" onclick="Scale(true)" />
  <input name="" type="button" value="取消比例" onclick="Scale(false)" />
</div>

</body>
</html>