masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > Avatar JavaScript memuat naik pemalam perkongsian kod sumber kemahiran_javascript

Avatar JavaScript memuat naik pemalam perkongsian kod sumber kemahiran_javascript

WBOY
Lepaskan： 2016-05-16 15:07:48
asal
1710 orang telah melayarinya

Contoh dalam artikel ini berkongsi kod sumber pemalam muat naik avatar JavaScript untuk rujukan anda. Kandungan khusus adalah seperti berikut

Rendering:

Kod sumber:
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 接口 */
Salin selepas log masuk

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元素全部加载完成，执行此方法
Salin selepas log masuk

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 &#63; 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 &#63; 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 &#63; 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 &#63; 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);//最后添加整个页面无法选中事件 
};
Salin selepas log masuk

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 &#63; 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 &#63; imgH : pic.movediv_default; 
  } 
  else { 
   moveboxWH = imgW <= pic.movediv_default &#63; 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); 
 }, 
};
Salin selepas log masuk

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>
Salin selepas log masuk

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; 
}
Salin selepas log masuk

Di atas adalah keseluruhan kandungan artikel ini saya harap ia akan membantu semua orang dalam mempelajari pengaturcaraan javascript.

Label berkaitan：
JavaScript头像上传插件 JavaScript头像上传 JavaScript上传头像
sumber：php.cn
Artikel sebelumnya：Ringkasan objek tempatan yang biasa digunakan dalam kemahiran JavaScript_javascript Artikel seterusnya：jQuery hanya melaksanakan kaedah menyerahkan data dan menunjukkan bar_jquery kemajuan memuatkan
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Muat naik berbilang fail imej dalam CodeIgniter menggunakan Ajax dan PHP Saya menghadapi masalah memuat naik berbilang fail imej ke bahagian pelayan. Alangkah baik...
daripada 2024-04-03 22:35:03
0
1
318
Kemas kini medan dalam permintaan AJAX POST Saya cuba mengemas kini medan tersuai secara dinamik dalam permintaan AJAXPOST menggunakan...
daripada 2024-04-02 11:45:41
0
1
360
Ubah suai tatasusunan PHP untuk melepaskan petikan tunggal Saya sedang memuat naik fail .xlsx ke tapak web dan membacanya ke dalam tatasusunan dan ke...
daripada 2024-04-01 20:35:28
0
1
304
Elakkan ralat semasa mengedit data tanpa memuat naik imej pengguna Jadi apabila saya mengemas kini data untuk pengguna, saya mendapat ralat di mana ia mahu m...
daripada 2024-03-31 12:44:01
0
1
268
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan