JavaScript头像上传插件源码分享

/* cxc.js 频繁操作公共接口 */ var $ = function (id) {  return document.getElementById(id); }; //通过id获取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, L, T, W, 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,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, fun1, false);  dom.addEventListener(type2, fun2, false); };  //一次添加dom的两个事件监听方法 var AddEvent3 = function (dom, type1, fun1, type2, fun2, type3, fun3) {  dom.addEventListener(type1, fun1, false);  dom.addEventListener(type2, fun2, false);  dom.addEventListener(type3, fun3, false); }; //一次添加dom的三个事件监听方法 var DelEvent = function (dom, type, fun) {  dom.removeEventListener(type, fun, false); }; // 删除dom对象的事件监听方法 var DelEvent2 = function (dom, type1, fun1, type2, fun2) {  dom.removeEventListener(type1, fun1, false);  dom.removeEventListener(type2, fun2, false); }; //一次删除dom对象的两个事件监听方法 var DelEvent3 = function (dom, type1, fun1, type2, fun2, type3, fun3) {  dom.removeEventListener(type1, fun1, false);  dom.removeEventListener(type2, fun2, false);  dom.removeEventListener(type3, fun3, 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, styleName1, 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, attrName1, 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, method, 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 接口 */ 

/* one.js */ /* my website philosophy */ /*  注：一般网站，浏览器最大化时，没有横向滚动条，有纵向滚动条，页面缩放按比例只在合适的地方用到  <html>标签 不必加css和js控制 <body>标签 作为总父标签 用它控制整个页面的宽度和高度  <body>的宽度 一般为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元素全部加载完成，执行此方法  

var downX, downY, oldL, oldT, tempWH, tempL, tempT, dxMax,tempMaxL,tempMaxT; var file, imgtype, imgsize, imgW, imgH, imgP, imgURL; var bigimgL, bigimgT; var moveboxWH, 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, "border", "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, EventsType[2], top_mouseup, EventsType[5], 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, EventsType[2], movebox_mouseup, EventsType[5], doc_movebox_mousemove); }; var doc_movebox_mousemove = function (e) {  moveboxL = oldL + e.clientX - downX;  moveboxT = oldT + e.clientY - downY;  moveboxLimit();  setLT(one.movebox, moveboxL, moveboxT);  fun.setimg();  fun.set_dxx(); }; var movebox_mouseup = function () {  DelEvent2(document, EventsType[2], movebox_mouseup, EventsType[5], 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, EventsType[2], TopLeft_mouseup, EventsType[5], 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, moveboxL, moveboxT);   setWH(one.movebox, moveboxWH , moveboxWH);  fun.setimg();  fun.set_dxx(); }; var TopLeft_mouseup = function () {  DelEvent2(document, EventsType[2], TopLeft_mouseup, EventsType[5], 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, EventsType[2], TopRight_mouseup, EventsType[5], 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, moveboxL, moveboxT);  setWH(one.movebox, moveboxWH, moveboxWH);  fun.setimg();  fun.set_dxx(); }; var TopRight_mouseup = function () {  DelEvent2(document, EventsType[2], TopRight_mouseup, EventsType[5], 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, EventsType[2], BottomRight_mouseup, EventsType[5], 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, moveboxL, moveboxT);  setWH(one.movebox, moveboxWH, moveboxWH);  fun.setimg();  fun.set_dxx(); }; var BottomRight_mouseup = function () {  DelEvent2(document, EventsType[2], BottomRight_mouseup, EventsType[5], 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, EventsType[2], BottomLeft_mouseup, EventsType[5], 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, moveboxL, moveboxT);  setWH(one.movebox, moveboxWH, moveboxWH);  fun.setimg();  fun.set_dxx(); }; var BottomLeft_mouseup = function () {  DelEvent2(document, EventsType[2], BottomLeft_mouseup, EventsType[5], 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, method, msg, 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, EventsType[1], movebox_mousedown);//movebox  AddEvent(one.TopLeft, EventsType[1], TopLeft_mousedown);//TopLeft  AddEvent(one.TopRight, EventsType[1], TopRight_mousedown);//TopRight  AddEvent(one.BottomRight, EventsType[1], BottomRight_mousedown);//BottomRight  AddEvent(one.BottomLeft, EventsType[1], BottomLeft_mousedown);//BottomLeft  AddEvent(one.p2, EventsType[0], p2_click);//p2  AddEvent(one.p3, EventsType[0], p3_click);//p3  /* =========================================== END =========================================== */  AddEvent(document, EventsType[5], cannotselect);//最后添加整个页面无法选中事件 }; 

var pic = {  pwh_max: 299, //图片最大宽高  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, 0, cw, ch);    ctx.drawImage(image, 0, 0, w, h, 0, 0,cw, 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, 0, cw, 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, moveboxL, moveboxT);   setWH(one.movebox, moveboxWH, 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, moveimgL, moveimgT);  }, }; 

<!DOCTYPE html> <html> <head>  <meta name="viewport" content="width=device-width" />  <script src="~/Scripts/one.js"></script>  <script src="~/Scripts/Events.js"></script>  <script src="~/Scripts/def.js"></script>  <script src="~/Scripts/cxc.js"></script>  <link href="~/Content/Avatar_Main.css" rel="stylesheet" />  <title>@ViewBag.Title</title> </head> <body>  <div id="avatar">   <img id="avatar_img" src="~/Images/default_avatar.jpg" />  </div>   <div id="main">   <div id="top">    <p id="p1"> 图 片 截 取 </p>   </div>   <div id="center">    <div id="movebox">     <i id="TopLeft"></i>     <i id="TopRight"></i>     <i id="BottomRight"></i>     <i id="BottomLeft"></i>     <img id="moveimg"/>    </div>    <div id="black"></div>    <img id="bigimg"/>   </div>    <div id="d1">    <img id="d11"/>   </div>   <div id="d2">    <img id="d22"/>   </div>   <div id="d3">    <img id="d33"/>   </div>   <div id="bottom">    <p id="p2">就是它了</p>    <p id="p3">暂且放弃</p>   </div>  </div> </body> </html> 

body {  margin:0px;  padding:0px;  background-color:#9C938F; } #avatar{  width:120px;  height:120px;  border:2px solid #FFFFFF;  position:absolute;   top:30px;  left:8%;  border-radius:7px;  background-color:#ffffff;  overflow:hidden;  cursor:pointer; } #avatar_img{  width:120px;  height:120px; } #upfile{  display:none; } #main{  position:absolute;  width:430px;  height:400px;  background-color:#9C938F;  border-bottom:1px solid #fff;  border-right:1px solid #fff;  border-left:1px solid #635E5B;  border-top:1px solid #635E5B;  border-radius:8px; } #top,#center,#d1,#d2,#d3,#bottom{  position:absolute;  border-bottom:1px solid #635E5B;  border-right:1px solid #635E5B;  border-left:1px solid #fff;  border-top:1px solid #fff;  background-color:#9C938F;  border-radius:8px; } #top{  width:424px;  height:43px;  left:2px;  top:2px;  text-align: center;   cursor:move; } #p1{  position:absolute;  left:115px;  top:-30px;  font-size:30px;  font-family:"微软雅黑";  color: #9C938F;  font-weight:normal;  text-shadow: -1px -1px white, 1.2px 1.2px #333333; } #center{  width:300px;  height:300px;  top:49px;  left:2px;  overflow:hidden;  border-radius:0px; } #d1{  overflow:hidden;  width:120px;  height:120px;  top:49px;  right:2px;  border-radius:0px; } #d2{  overflow:hidden;  width:100px;  height:100px;  top:173px;  right:2px;  border-radius:0px; } #d3{  overflow:hidden;  width:72px;  height:72px;  top:277px;  right:2px;  border-radius:0px; } #bottom{  width:424px;  height:43px;  left:2px;  bottom:2px; } #p2,#p3{  position:absolute;  width:100px;  height:30px;  font-size:22px;  font-family:"微软雅黑";  color: #9C938F;  font-weight:normal;  text-shadow: -1px -1px white, 1.2px 1.2px #333333; } #p2:hover,#p3:hover{  cursor:pointer;  color:#bbbbbb; } #p2{  top:-15px;  left:200px; } #p3{  top:-15px;  right:10px; } #bigimg{  position:absolute; } #black{  position:absolute;  z-index:99;  width:299px;  height:299px;  background-color:#000;  opacity:0.6; } #movebox {  position: absolute;  z-index: 100;  overflow: hidden;  cursor:move; }  #BottomRight,#TopRight,#TopLeft,#BottomLeft {  background:#D6FB66;  display:block;  width:6px;  height:6px;  overflow:hidden;  position:absolute;  z-index:105;  bottom:0;  right:0;  cursor:nw-resize; } #BottomLeft {  bottom:0;  left:0;  cursor:ne-resize; } #TopRight {  top:0;  right:0;  cursor:ne-resize; } #TopLeft {  top:0;  left:0;  cursor:nw-resize; } #moveimg{  position:absolute; } #d11,#d22,#d33{  position:absolute; }