图片裁剪功能

【Javascript】

下载

新闻

文章

在制作网页头像时常常需要经过裁剪头像，一般是用javascript实现预览功能，然后发给后台实现真实裁剪。

这是以前工作的一个例子，基本上可以完成裁剪预览功能，但仍有两点不足之处：1是图片无限缩小，应该是缩小到100X100就不能缩小。2是选取范围有限，右边必须在缩小的情况下才可选取。应该在不缩小的情况下也能全局选取。在此先放出，有待以后改进。如果你有改良方法不防告诉我呀。

浏览效果点击这里

//核心代码
var x,y;
var dom=document.documentElement;
window.onload=function(){
	var cc=document.getElementById('cut_container');
	var img=document.getElementById('cut_img');
	var ci=document.getElementById('cut_imager');
	var ca=document.getElementById('cut_area');
	var si=document.getElementById('see_img');
	var cti=document.getElementById('img_area');
	if(img.offsetWidth<100||img.offsetHeight<100){
		alert('图片宽高大小不符合头像要求，请重新选择图片上传！');
		location.href=cBackurl;
		return false;
	}
	ci.style.height=Math.min(img.offsetHeight,cc.offsetHeight-2)+'px';
	ci.style.width=Math.min(img.offsetWidth,cc.offsetWidth-2)+'px';
	ci.style.top='0';
	ci.style.left='0';
	si.style.top=ci.offsetTop+'px';
	si.style.left=ci.offsetLeft+'px';
	//区域移动
	ca.onmousedown=function(){
		var ev=window.event||arguments[arguments.length-1];
		x=ev.clientX;
		y=ev.clientY;
		dom.ondragstart=function(){return false;};
		dom.onselectstart=function(){return false;};
		dom.onmousemove=function(){
			var ev=window.event||arguments[arguments.length-1];
			var X=ev.clientX;
			var Y=ev.clientY;
			ca.style.left=ca.offsetLeft+(X-x)+'px';
			ca.style.top=ca.offsetTop+(Y-y)+'px';
			if(ca.offsetLeft<0){
				ca.style.left='0';
			}else{
				if(ca.offsetLeft+ca.offsetWidth>ci.offsetWidth){
					ca.style.left=ci.offsetWidth-ca.offsetWidth+'px';
				}
				else{
					x=X;
				}
			}
			if(ca.offsetTop<0){
				ca.style.top='0';
			}else{
				if(ca.offsetTop+ca.offsetHeight>ci.offsetHeight){
					ca.style.top=ci.offsetHeight-ca.offsetHeight+'px';
				}
				else{
					y=Y;
				}
			}
			si.style.top='-'+ca.offsetTop+'px';
			si.style.left='-'+ca.offsetLeft+'px';
			cti.style.top='-'+ca.offsetTop+'px';
			cti.style.left='-'+ca.offsetLeft+'px';
		};
		dom.onmouseup=function(){
			this.onselectstart=null;
			this.onmousemove=null;
			this.onmouseup=null;
		};
	};
	var sd=document.getElementById('cut_slider');
	//滑杆移动
	sd.onmousedown=function(){
		var ev=window.event||arguments[arguments.length-1];
		x=ev.clientX;
		dom.onselectstart=function(){return false;};
		dom.onmousemove=function(){
			var ev=window.event||arguments[arguments.length-1];
			var X=ev.clientX;
			sd.style.left=sd.offsetLeft+(X-x)+'px';
			if(sd.offsetLeft<=0){
				sd.style.left='0';
			}
			else{
				if(sd.offsetLeft+sd.offsetWidth>sd.parentNode.offsetWidth+3){
					sd.style.left=sd.parentNode.offsetWidth-sd.offsetWidth+3+'px';
				}
				else{
					x=X;
				}
			}
			var nPercent=(sd.offsetLeft+3)/sd.parentNode.offsetWidth*2;
			img.style.width='auto';
			img.style.height='auto';
			var nIw=img.offsetWidth;
			var nIh=img.offsetHeight;
			img.style.width=nIw*nPercent+'px';
			img.style.height=nIh*nPercent+'px';
			ci.style.width=img.offsetWidth+'px';
			ci.style.height=img.offsetHeight+'px';
			si.style.width=img.offsetWidth+'px';
			si.style.height=img.offsetHeight+'px';
			cti.style.width=img.offsetWidth+'px';
			cti.style.height=img.offsetHeight+'px';
		};
		dom.onmouseup=function(){
			this.onselectstart=null;
			this.onmousemove=null;
			this.onmouseup=null;
		};
	};
};