获取dom对象 var A = function (msg) { alert(msg); }; //alert的简写 var EmptyFun = function () { }; // 空方法 var setL = function (dom,L) { dom.style.left = L + "px"; }; // 设置 dom 的 left var setT = function (dom,T) { dom.style.top = T + "px"; }; // 设置 dom 的 top var setLT = function (dom,L,T) { dom.style.left = L + "px"; dom.style.top = T + "px"; }; //同时设置 dom 的 left top var getLT = function (dom) { return [parseInt(dom.style.left),parseInt(dom.style.top)]; }; // 返回dom的left和top值，类型为整型数组[int,int] var setW = function (W) { dom.style.width = W + "px"; }; // 设置 dom 的 width var setH = function (H) { dom.style.height = H + "px"; }; // 设置 dom 的 height var setWH = function (dom,W,H) { dom.style.width = W + "px"; dom.style.height = H + "px"; }; //同时设置 dom 的 width height var getWH = function (dom) { return [parseInt(dom.style.width),parseInt(dom.style.height)]; }; // 返回dom的 width 和 height 值，类型为整型数组[int,int] var setLTWH = function (dom,T,H) { dom.style.left = L + "px"; dom.style.top = T + "px"; dom.style.width = W + "px"; dom.style.height = H + "px"; }; //同时设置 dom 的 left top width height var getLTWH = function (dom) { return [parseInt(dom.style.left),parseInt(dom.style.top),parseInt(dom.style.width),parseInt(dom.style.height)] }; // 返回dom的 left top width height 值，类型为整型数组[int,int,int] var setcursor = function (dom,shape) { dom.style.cursor = shape; }; //设置鼠标经过dom的指针形状 var EventsType = ["click","mousedown","mouseup","mouSEOver","mouseleave","mousemove"];//事件类型 var AddEvent = function (dom,type,fun) { dom.addEventListener(type,fun,false); }; //添加dom对象的事件监听方法 var AddEvent2 = function (dom,type1,fun1,type2,fun2) { dom.addEventListener(type1,false); dom.addEventListener(type2,fun2,false); }; //一次添加dom的两个事件监听方法 var AddEvent3 = function (dom,type3,fun3) { dom.addEventListener(type1,false); dom.addEventListener(type3,fun3,false); }; //一次添加dom的三个事件监听方法 var DelEvent = function (dom,fun) { dom.removeEventListener(type,false); }; // 删除dom对象的事件监听方法 var DelEvent2 = function (dom,fun2) { dom.removeEventListener(type1,false); dom.removeEventListener(type2,false); }; //一次删除dom对象的两个事件监听方法 var DelEvent3 = function (dom,fun3) { dom.removeEventListener(type1,false); dom.removeEventListener(type3,false); }; //一次删除dom对象的三个事件监听方法 var inArray = function (str,arr) { for (var i = 0; i < arr.length; i++) { if (str == arr[i]) { return true; } } return false; }; // 判断字符串str是否存在于数组arr var cannotselect = function () { window.getSelection().removeAllRanges(); }; //页面元素（文字、图片等）不能被选中 var setStyle = function (dom,styleName,styleValue) { dom.setAttribute("style",styleName + ":" + styleValue + ";"); }; //设置dom的 一个style 属性值 var setStyle2 = function (dom,styleName1,styleValue1,styleName2,styleValue2) { dom.setAttribute("style",styleName1 + ":" + styleValue1 + ";" + styleName2 + ":" + styleValue2 + ";"); };//一次设置dom的 两个style 属性值 var delStyle = function (dom,styleName) { dom.removeAttribute("style",styleName); };//删除dom的 一个style 属性值 var delStyle2 = function (dom,styleName2) { dom.removeAttribute("style",styleName1); dom.removeAttribute("style",styleName2); };//一次删除dom的 两个style 属性值 var setAttr = function (dom,attrName,attrValue) { dom.setAttribute(attrName,attrValue); };// 设置dom的 一个属性值 var setAttr2 = function (dom,attrName1,attrValue1,attrName2,attrValue2) { dom.setAttribute(attrName1,attrValue1); dom.setAttribute(attrName2,attrValue2); };//一次设置dom的 两个属性值 var delAttr = function (dom,attrName) { dom.removeAttribute(attrName); };//删除dom的 一个属性值 var delAttr2 = function (dom,attrName2) { dom.removeAttribute(attrName1); dom.removeAttribute(attrName2); };//删除dom 的两个属性值 var Click = function (dom) { dom.click(); };// 点击dom var Hide = function (dom) { dom.style.display = "none"; };// 隐藏dom var Show = function (dom) { dom.style.display = "inline"; }; // 显示dom /* cxc.js 频繁操作公共接口 */

/ AJAX 接口 /
var url,method,msg;
var xmlReq = new XMLHttpRequest();
var AJAX = function (url,msg,callback) {
xmlReq.open(method,url,true);
xmlReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlReq.onreadystatechange = function () {
if (xmlReq.readyState == 4) {
if (xmlReq.status == 200) {
callback();
}
else {
A("bad status is " + xmlReq.status);
}
}
};
xmlReq.send(msg);
};
/ AJAX 接口 /

页面缩放按比例只在合适的地方用到 标签 不必加css和js控制 标签 作为总父标签 用它控制整个页面的宽度和高度 的宽度 一般为100%(考虑滚动条存在与否) 而高度可根据页面需求自定义 也就是说body的宽高就是页面的宽高 页面高度如果超出 浏览器窗口高度 出现滚动条 */ var one = { screenW: null,//可用浏览器窗口的宽度 screenH: null,//可用浏览器窗口的高度 body: null,//document.body对象 bodyW: null,//body的宽度 bodyH: null,//body的高度 avatar: null,//默认头像div avatar_img:null,main: null,//处理上传图片的主要父div mainW: 430,//main的宽度 mainH:400,//main的高度 mainL: null,//main 的left位置 mainT:null,//main 的top位置 top: null,upfile:null,center:null,bigimg: null,moveBox: null,moveimg: null,d11: null,d22: null,d33: null,TopLeft: null,TopRight: null,BottomRight: null,BottomLeft: null,p2: null,p3:null }; var Init = function () { ////////////////////////////////////////////////////////////////// one.screenW = window.innerWidth; one.screenH = window.innerHeight; one.body = document.body; one.bodyW = one.body.offsetWidth; one.bodyH = one.screenH; //定义body的高度等于可用浏览器窗口的高度 one.body.setAttribute("style","height:" + one.bodyH + "px;"); ////////////////////////////////////////////////////////////////// one.avatar = $("avatar"); one.avatar_img = $("avatar_img"); one.main = $("main"); one.mainL = (one.bodyW - one.mainW) / 2; one.mainT = (one.screenH - one.mainH) / 2; /////////////////////////////////////////////////////////// one.top = $("top"); one.center = $("center"); one.bigimg = $("bigimg"); one.moveBox = $("moveBox"); one.moveimg = $("moveimg"); one.d11 = $("d11"); one.d22 = $("d22"); one.d33 = $("d33"); /////////////////////////////////////////////////////////// one.TopLeft = $("TopLeft"); one.TopRight = $("TopRight"); one.BottomRight = $("BottomRight"); one.BottomLeft = $("BottomLeft"); /////////////////////////////////////////////////////////// one.p2 = $("p2"); one.p3 = $("p3"); /////////////////////////////////////////////////////////// setLT(one.main,one.mainL,one.mainT); Hide(one.main); }; var End = function () {

};
window.onload = function () {
Init(); //初始化，获取页面上所有需要处理的标签对象，并赋初始值
Events(); //定义页面中的所有事件
End(); //js文件加载完成之后的处理工作
};//dom元素全部加载完成，执行此方法

BoxWH,moveBoxL,moveBoxT,moveBoxMinL,moveBoxMinT,moveBoxMaxL,moveBoxMaxT; var moveimgL,moveimgT; var topL,topT; var gen = { _moveBoxWH:null,_moveBoxL: null,_moveBoxT: null,}; /* one.avatar Events start */ var avatar_click = function () { one.upfile = document.createElement("input"); setAttr2(one.upfile,"type","file","id","upfile"); this.parentNode.appendChild(one.upfile); Click(one.upfile); one.upfile.onchange = function () { file = this.files[0]; imgtype = file.type; if (!fun.check_imgtype()) { return; } //检查文件类型 imgsize = file.size; if (!fun.check_imgsize()) { return; }; //检查图片大小 var reader = new FileReader(); reader.onload = function () { fun.setImgWH(this.result,imgtype); delete (reader); }; reader.readAsDataURL(file); /////////////////////////// this.parentNode.removeChild(one.upfile); }; }; var avatar_mouSEOver = function () { setStyle2(one.avatar,"border","2px solid #46AFDC","Box-shadow","0 0 5px #46AFDC"); }; var avatar_mouseleave = function () { delStyle2(one.avatar,"Box-shadow"); }; /* one.avatar Events end */

/ one.top Events start /
var topLimit = function () {
if (topL < 0)
topL = 1;
else if (topL > one.bodyW - 432)
topL = one.bodyW - 432 - 1;
if (topT < 0)
topT = 1;
else if (topT > one.screenH - 402)
topT = one.screenH - 402 - 1;
};
var top_mousedown = function (e) {
if (e.button > 0) {
top_mouseup();
return false;
}
downX = e.clientX;
downY = e.clientY;
oldL = one.main.offsetLeft;
oldT = one.main.offsetTop;
AddEvent2(document,EventsType[2],top_mouseup,EventsType[5],doc_top_mousemove);
};
var doc_top_mousemove = function (e) {
topL = oldL + e.clientX - downX;
topT = oldT + e.clientY - downY;
topLimit();
setLT(one.main,topL,topT);
};
var top_mouseup = function () {
DelEvent2(document,doc_top_mousemove);
};
/ one.top Events end /

/ one.moveBox Events start /
var moveBoxLimit = function () {
if (moveBoxL <= moveboxMinL)
moveboxL = moveboxMinL;
else if (moveboxL >= moveBoxMaxL)
moveBoxL = moveBoxMaxL;
if (moveBoxT <= moveboxMinT)
moveboxT = moveboxMinT;
else if (moveboxT > moveBoxMaxT)
moveBoxT = moveBoxMaxT;
};
var moveBox_mousedown = function (e) {
if (e.button > 0) {
moveBox_mouseup();
return false;
}
e.preventDefault && e.preventDefault();
downX = e.clientX;
downY = e.clientY;
oldL = moveBoxL;
oldT = moveBoxT;
AddEvent2(document,moveBox_mouseup,doc_moveBox_mousemove);
};
var doc_moveBox_mousemove = function (e) {
moveBoxL = oldL + e.clientX - downX;
moveBoxT = oldT + e.clientY - downY;
moveBoxLimit();
setLT(one.moveBox,moveBoxT);
fun.setimg();
fun.set_dxx();
};
var moveBox_mouseup = function () {
DelEvent2(document,doc_moveBox_mousemove);
};
/ one.moveBox Events end /

/ 拉伸事件开始 /
var TopLeft_mousedown = function (e) {
if (e.button > 0) {
TopLeft_mouseup();
return false;
}
e.preventDefault && e.preventDefault();
downX = e.clientX;
downY = e.clientY;
oldL = moveBoxL;
oldT = moveBoxL;
tempWH = moveBoxWH;
tempL = moveBoxL - bigimgL;
tempT = moveBoxT - bigimgT;
tempMaxL = moveBoxMaxL;
tempMaxT = moveBoxMaxT;
dxMax = tempL >= tempT ? tempT : tempL;
AddEvent2(document,TopLeft_mouseup,doc_TopLeft_mousemove);
};
var doc_TopLeft_mousemove = function (e) {
moveBox_mouseup();//移动事件屏蔽，非常重要
var dx = e.clientY - downY;
if (dx < 0 && Math.abs(dx) > dxMax) {
dx = -dxMax;
}
else if (dx > 0 && dx > tempWH - pic.pwh_min) {
dx = tempWH - pic.pwh_min;
}
moveBoxMaxL = tempMaxL + dx;
moveBoxMaxT = tempMaxT + dx;
moveBoxL = oldL + dx;
moveBoxT = oldT + dx;
moveBoxWH = tempWH - dx;
setLT(one.moveBox,moveBoxT);
setWH(one.moveBox,moveBoxWH,moveBoxWH);
fun.setimg();
fun.set_dxx();
};
var TopLeft_mouseup = function () {
DelEvent2(document,doc_TopLeft_mousemove);
};

var TopRight_mousedown = function (e) {
if (e.button > 0) {
TopRight_mouseup();
return false;
}
e.preventDefault && e.preventDefault();
downX = e.clientX;
downY = e.clientY;
oldL = moveBoxL;
oldT = moveBoxL;
tempWH = moveBoxWH;
tempL = imgW - (moveBoxL - bigimgL) - moveBoxWH;
tempT = moveBoxT - bigimgT;
tempMaxL = moveBoxMaxL;
tempMaxT = moveBoxMaxT;
dxMax = tempL >= tempT ? tempT : tempL;
AddEvent2(document,TopRight_mouseup,doc_TopRight_mousemove);
};
var doc_TopRight_mousemove = function (e) {
moveBox_mouseup();//移动事件屏蔽，非常重要
var dx = e.clientY - downY;
if (dx < 0 && Math.abs(dx) > dxMax) {
dx = -dxMax;
}
else if (dx > 0 && dx > tempWH - pic.pwh_min) {
dx = tempWH - pic.pwh_min;
}
moveBoxMaxL = tempMaxL + dx;
moveBoxMaxT = tempMaxT + dx;
moveBoxL = oldL;
moveBoxT = oldT + dx;
moveBoxWH = tempWH - dx;
setLT(one.moveBox,moveBoxT);
setWH(one.moveBox,moveBoxWH);
fun.setimg();
fun.set_dxx();
};
var TopRight_mouseup = function () {
DelEvent2(document,doc_TopRight_mousemove);
};

var BottomRight_mousedown = function (e) {
if (e.button > 0) {
BottomRight_mouseup();
return false;
}
e.preventDefault && e.preventDefault();
downX = e.clientX;
downY = e.clientY;
oldL = moveBoxL;
oldT = moveBoxL;
tempWH = moveBoxWH;
tempL = imgW - (moveBoxL - bigimgL) - moveBoxWH;
tempT = imgH - (moveBoxT - bigimgT) - moveBoxWH;
tempMaxL = moveBoxMaxL;
tempMaxT = moveBoxMaxT;
dxMax = tempL >= tempT ? tempT : tempL;
AddEvent2(document,BottomRight_mouseup,doc_BottomRight_mousemove);
};
var doc_BottomRight_mousemove = function (e) {
moveBox_mouseup();//移动事件屏蔽，非常重要
var dx = e.clientY - downY;
if (dx > 0 && dx > dxMax) {
dx = dxMax;
}
else if (dx < 0 && Math.abs(dx) > tempWH - pic.pwh_min) {
dx = -(tempWH - pic.pwh_min);
}
moveBoxMaxL = tempMaxL - dx;
moveBoxMaxT = tempMaxT - dx;
moveBoxL = oldL;
moveBoxT = oldT;
moveBoxWH = tempWH + dx;
setLT(one.moveBox,moveBoxWH);
fun.setimg();
fun.set_dxx();
};
var BottomRight_mouseup = function () {
DelEvent2(document,doc_BottomRight_mousemove);
};

var BottomLeft_mousedown = function (e) {
if (e.button > 0) {
BottomLeft_mouseup();
return false;
}
e.preventDefault && e.preventDefault();
downX = e.clientX;
downY = e.clientY;
oldL = moveBoxL;
oldT = moveBoxL;
tempWH = moveBoxWH;
tempL = moveBoxL - bigimgL;
tempT = imgH - (moveBoxT - bigimgT) - moveBoxWH;
tempMaxL = moveBoxMaxL;
tempMaxT = moveBoxMaxT;
dxMax = tempL >= tempT ? tempT : tempL;
AddEvent2(document,BottomLeft_mouseup,doc_BottomLeft_mousemove);
};
var doc_BottomLeft_mousemove = function (e) {
moveBox_mouseup();//移动事件屏蔽，非常重要
var dx = e.clientY - downY;
if (dx > 0 && dx > dxMax) {
dx = dxMax;
}
else if (dx < 0 && Math.abs(dx) > tempWH - pic.pwh_min) {
dx = -(tempWH - pic.pwh_min);
}
moveBoxMaxL = tempMaxL - dx;
moveBoxMaxT = tempMaxT - dx;
moveBoxL = oldL - dx;
moveBoxT = oldT;
moveBoxWH = tempWH + dx;
setLT(one.moveBox,moveBoxWH);
fun.setimg();
fun.set_dxx();
};
var BottomLeft_mouseup = function () {
DelEvent2(document,doc_BottomLeft_mousemove);
};
/ 拉伸事件结束 /

/ 两个按钮事件开始 /
var callback = function () {
var txt = xmlReq.responseText;
one.avatar_img.src = "../saveimg/"+txt;
Hide(one.main);
Show(one.avatar);
};
var create_msg = function () {
var msg = "moveBoxL=" + (moveBoxL - bigimgL) + "&moveBoxT=" + (moveBoxT - bigimgT) + "&moveBoxWH=" + moveBoxWH;
msg += "&imgURL=" + imgURL;
return msg;
};
var p2_click = function () {
url="../Avatar/AJAX_saveimg";
method = "post";
msg = create_msg();
AJAX(url,callback);
};
var p3_click = function () {
Hide(one.main);
Show(one.avatar);
};
/ 两个按钮事件结束 /
var Events = function () {
AddEvent3(one.avatar,EventsType[0],avatar_click,EventsType[3],avatar_mouSEOver,EventsType[4],avatar_mouseleave);//avatar
AddEvent(one.top,EventsType[1],top_mousedown);//top
AddEvent(one.moveBox,moveBox_mousedown);//moveBox
AddEvent(one.TopLeft,TopLeft_mousedown);//TopLeft
AddEvent(one.TopRight,TopRight_mousedown);//TopRight
AddEvent(one.BottomRight,BottomRight_mousedown);//BottomRight
AddEvent(one.BottomLeft,BottomLeft_mousedown);//BottomLeft
AddEvent(one.p2,p2_click);//p2
AddEvent(one.p3,p3_click);//p3
/ =========================================== END =========================================== /
AddEvent(document,cannotselect);//最后添加整个页面无法选中事件
};

图片最大宽高 pwh_min: 30,//图片最小宽高 P:10/1,//图片宽高比 movediv_min: 30,//截框最小宽高 movediv_default: 100,//截框初始宽高 W_H: false,//宽大于高？ imgtype: ["image/jpeg","image/png","image/gif","image/bmp"],//支持这4种类型图片 imgsize: 5 * 1024 * 1024,//最大5M d11WH: 119,d22WH: 99,d33WH: 71,URL:window.URL || window.webkitURL || window.mozURL || window.msURL || false,}; var fun = { FormBlob: function (dataURI) { var byteString,splits = false,splits1 = dataURI.replace(new RegExp("^data:.*base64,"),function () { splits = true; return ""; }); byteString = atob(splits1); var byteStringlength = byteString.length,ia = new Uint8Array(byteStringlength); for (var i = 0; i < byteStringlength; i++) { ia[i] = byteString.charCodeAt(i); } return new Blob([ia],{ type: imgtype }); },check_imgtype: function () { if (!inArray(imgtype,pic.imgtype)) { one.upfile.parentNode.removeChild(one.upfile); alert("请选择正确的图片类型"); return false; } else { return true;} },check_imgsize: function () { if (imgsize > pic.imgsize) { this.parentNode.removeChild(this); alert("图片不能超过5M"); return false; } else { return true;} },setImgWH: function (src,type) { var image = new Image(); image.onload = function () { var newcanvas = document.createElement("canvas"); newcanvas.style.display = "none"; var bodys = document.body; bodys.appendChild(newcanvas); var ctx = newcanvas.getContext("2d"); var width = this.width,height = this.height;//图片的宽高 var w,h; //选取图片的宽高 var cw,ch;//画布的宽高 var P = width / height; imgP = P; pic.W_H = width > height ? true : false; if (pic.W_H) { if (P >= 10) { ch = pic.pwh_min; cw = pic.pwh_max; h = height; w = h * pic.pwh_max / pic.pwh_min; } else { if (height <= pic.pwh_min) { ch = pic.pwh_min; cw = Math.round(ch * P); h = height; w = width; } else if (width >= pic.pwh_max) { cw = pic.pwh_max; ch = Math.round(cw / P); h = height; w = width; } else { cw = width; ch = height; h = height; w = width; } } } else { if (P <= 1 / 10) { cw = pic.pwh_min; ch = pic.pwh_max; w = width; h = w * pic.pwh_max / pic.pwh_min; } else { if (width <= pic.pwh_min) { cw = pic.pwh_min; ch = Math.round(cw / P); w = width; h = height; } else if (height >= pic.pwh_max) { ch = pic.pwh_max; cw = Math.round(ch * P); w = width; h = height; } else { cw = width; ch = height; h = height; w = width; } } } ///////////////////////////////////////////////////// imgW = newcanvas.width = cw; imgH = newcanvas.height = ch; ctx.fillStyle = "#FFFFFF"; ctx.fillRect(0,cw,ch); ctx.drawImage(image,w,h,ch); imgURL = newcanvas.toDataURL(type,1); //imgURL = pic.URL.createObjectURL(fun.FormBlob(imgURL)); one.d11.src = one.d22.src = one.d33.src = one.bigimg.src = one.moveimg.src = imgURL; ctx.clearRect(0,ch); bodys.removeChild(newcanvas); delete DATA; delete image; fun.setStart(); }; image.onerror = function () { alert("图片已损坏，请上传正确图片"); }; image.src = src; },setStart: function () { Hide(one.avatar); Show(one.main); fun.set_bigimg(); fun.set_moveBox(); fun.set_dxx(); },set_bigimg: function () { bigimgL = Math.round((pic.pwh_max - imgW) / 2); bigimgT = Math.round((pic.pwh_max - imgH) / 2); setLT(one.bigimg,bigimgL,bigimgT); },set_moveBox: function () { if (pic.W_H) { moveBoxWH = imgH <= pic.movediv_default ? imgH : pic.movediv_default; } else { moveBoxWH = imgW <= pic.movediv_default ? imgW : pic.movediv_default; } moveBoxL = Math.round((pic.pwh_max - moveBoxWH) / 2); moveBoxT = Math.round((pic.pwh_max - moveBoxWH) / 2); moveBoxMinL = bigimgL; moveBoxMinT = bigimgT; moveBoxMaxL = Math.round(pic.pwh_max - moveBoxWH - bigimgL); moveBoxMaxT = Math.round(pic.pwh_max - moveBoxWH - bigimgT); setLT(one.moveBox,moveBoxT); setWH(one.moveBox,moveBoxWH); moveimgL = -Math.round((imgW - moveBoxWH) / 2); moveimgT = -Math.round((imgH - moveBoxWH) / 2); setLT(one.moveimg,moveimgL,moveimgT); },set_dxx: function () { var P1 = pic.d11WH / moveBoxWH; var P2 = pic.d22WH / moveBoxWH; var P3 = pic.d33WH / moveBoxWH; var d11W = Math.round(imgW * P1); var d22W = Math.round(imgW * P2); var d33W = Math.round(imgW * P3); var d11H = Math.round(imgH * P1); var d22H = Math.round(imgH * P2); var d33H = Math.round(imgH * P3); setWH(one.d11,d11W,d11H); setWH(one.d22,d22W,d22H); setWH(one.d33,d33W,d33H); var d11L = Math.round(moveimgL * P1); var d22L = Math.round(moveimgL * P2); var d33L = Math.round(moveimgL * P3); var d11T = Math.round(moveimgT * P1); var d22T = Math.round(moveimgT * P2); var d33T = Math.round(moveimgT * P3); setLT(one.d11,d11L,d11T); setLT(one.d22,d22L,d22T); setLT(one.d33,d33L,d33T); },setimg: function () { moveimgL = bigimgL - one.moveBox.offsetLeft; moveimgT = bigimgT - one.moveBox.offsetTop; setLT(one.moveimg,};

<div id="main">
<div id="top">
<p id="p1"> 图 片 截 取