JavaScript头像上传插件源码分享


Posted in Javascript onMarch 29, 2016

本文实例为大家分享了JavaScript头像上传插件源码,供大家参考,具体内容如下

效果图:

JavaScript头像上传插件源码分享

JavaScript头像上传插件源码分享

JavaScript头像上传插件源码分享

JavaScript头像上传插件源码分享

源码:
cxc.js      

/* 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

/* 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元素全部加载完成,执行此方法

Events.js

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);//最后添加整个页面无法选中事件 
};

def.js

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); 
 }, 
};

Index.cshtml

<!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>

Avatar_Main.css

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; 
}

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
jQuery 中关于CSS操作部分使用说明
Jun 10 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
Jan 29 Javascript
浏览器的JavaScript引擎的识别方法
Oct 20 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
Apr 30 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
jQuery中 bind的用法简单介绍
Feb 13 Javascript
vue实现文件上传功能
Aug 13 Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 Javascript
详解vue更改头像功能实现
Apr 28 Javascript
node.js实现上传文件功能
Jul 15 Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 Javascript
js解决movebox移动问题
Mar 29 #Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 #Javascript
分析js闭包引起的事件注册问题
Mar 29 #Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
Mar 29 #Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 #Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 #Javascript
JavaScript面向对象程序设计教程
Mar 29 #Javascript
You might like
阿拉伯的咖啡与水烟
2021/03/03 咖啡文化
PHP中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
JavaScript Array对象详解
2016/03/01 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
详谈js中标准for循环与foreach(for in)的区别
2017/11/02 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
AngularJS自定义过滤器用法经典实例总结
2018/05/17 Javascript
利用JS实现一个同Excel表现的智能填充算法
2018/08/13 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
开源软件包和环境管理系统Anaconda的安装使用
2017/09/04 Python
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
python抓取需要扫微信登陆页面
2019/04/29 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
环保倡议书范文
2014/05/12 职场文书
养牛场项目建议书
2014/05/13 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
2014年辅导员工作总结
2014/11/18 职场文书
社区好人好事材料
2014/12/26 职场文书
奖学金感谢信
2015/01/21 职场文书
平遥古城导游词
2015/02/03 职场文书