js 头像上传（图片截取） 插件 全屏高清版 源码
来源：互联网 发布：fc2软件最新域名 编辑：程序博客网 时间：2024/05/04 11:40
先上图片
index.html
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>ccp</title> <link href="Content/ccp.css" rel="stylesheet" /> <script src="Scripts/cxc.js"></script> <script src="Scripts/ccp.js"></script> <script src="Scripts/fun.js"></script></head><body> <div id="SelectPicture">选 择 图 片</div> <div id="pre"> <div id="prea"> <div id="ctna"> <img id="imga"/> </div> </div> <div id="preb"> <div id="ctnb"> <img id="imgb"/> </div> </div> <div id="prec"> <div id="ctnc"> <img id="imgc"/> </div> </div> </div> <div id="ccp"> <div id="ctn"> <img id="fixed_img" /> <div id="varied_div"> <img id="varied_div_img" /> <i id="TopLeft"></i> <i id="TopRight"></i> <i id="BottomRight"></i> <i id="BottomLeft"></i> </div> </div> <div id="black_cover"></div> </div> <div id="bt"> <div id="Y_OUT"> <div id="Y">Y</div> </div> <div id="N_OUT"> <div id="N">N</div> </div> </div></body></html>
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 的 leftvar setT = function (dom, T) { dom.style.top = T + "px";}; // 设置 dom 的 topvar setLT = function (dom, L, T) { dom.style.left = L + "px"; dom.style.top = T + "px";}; //同时设置 dom 的 left topvar 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 的 widthvar setH = function (H) { dom.style.height = H + "px";}; // 设置 dom 的 heightvar setWH = function (dom, W, H) { dom.style.width = W + "px"; dom.style.height = H + "px";}; //同时设置 dom 的 width heightvar 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 heightvar setRTWH = function (dom, R, T, W, H) { dom.style.right = R + "px"; dom.style.top = T + "px"; dom.style.width = W + "px"; dom.style.height = H + "px";}; //同时设置 dom 的 left top width heightvar 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:"click", mousedown:"mousedown", mouseup:"mouseup", mouseover:"mouseover", mouseleave:"mouseleave", mousemove:"mousemove", DOMContentLoaded:"DOMContentLoaded",};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是否存在于数组arrvar 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 Hide = function (dom) { dom.style.display = "none";};// 隐藏domvar Hide3 = function (dom1,dom2,dom3) { dom1.style.display = "none"; dom2.style.display = "none"; dom3.style.display = "none";};// 隐藏3个domvar Show = function (dom) { dom.style.display = "inline";}; // 显示domvar Show3 = function (dom1, dom2, dom3) { dom1.style.display = "inline"; dom2.style.display = "inline"; dom3.style.display = "inline";};// 显示3个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("ajax status is " + xmlReq.status); } } }; xmlReq.send(msg);};/* AJAX 接口 *//* 入口 */var start = function (fun) { var begin = function () { DelEvent(document, EventsType.DOMContentLoaded, begin); fun(); }; AddEvent(document, EventsType.DOMContentLoaded, begin);};/* 入口 *//* 环境 */var screenW = window.innerWidth;var screenH = window.innerHeight;/* 环境 */var cfg = { imgtype: ["image/jpeg", "image/png", "image/gif", "image/bmp"], imgsize: 5 * 1024 * 1024, varied_divMIN: 50, varied_divDEFAULT: 100, needWH:0,};var dom = { body: null, SelectPicture: null, upfile: null, pre: null, ccp: null, bt: null, prea: null, preb: null, prec: null, ctna: null, ctnb: null, ctnc: null, imga: null, imgb: null, imgc: null, Y_OUT: null, N_OUT: null, Y: null, N: null, ctn: null, black_cover: null, fixed_img: null, varied_div: null, varied_div_img: null, TopLeft: null, TopRight: null, BottomRight: null, BottomLeft: null,};var ccp = { SelectPictureW: null, SelectPictureH: null, SelectPictureP1: 9, SelectPictureP2: 4, SelectPictureL: null, SelectPictureT: null, SelectPictureFontSize: null, /////////////////////////// file: null, imgtype: null, imgsize: null, /////////////////////////// imgW: null, imgH: null, imgN: null, imgURL: null, ////////////////////////// preW: null, preH: null, ccpW: null, ccpH: null, btW: null, btH: null, ///////////////////////// pre4: null, preaL: null, preaT: null, preaWH: null, prebL: null, prebT: null, prebWH: null, precL: null, precT: null, precWH: null, ctnLT: 3, ctnaWH: null, ctnbWH: null, ctncWH: null, ////////////////////////// YN3: null, YN_OUTWH: null, YNWH: null, YN_OUTR: null, Y_OUTT: null, N_OUTT: null, YNLT1: 25, YNLT2: 20, ////////////////////////// ctnL: null, ctnT: null, black_coverL: null, black_coverT: null, ///////////////////////// varied_divL: null, varied_divT: null, varied_divWH: null, varied_divMaxL: null, varied_divMaxT: null, varied_div_imgWH: null, varied_div_imgL: null, varied_div_imgT: null, ///////////////////////// imgaW: null, imgaH: null, imgaL: null, imgaT: null, imgbW: null, imgbH: null, imgbL: null, imgbT: null, imgcW: null, imgcH: null, imgcL: null, imgcT: null, /////////////////////////};var GET_DOM = function () { dom.body = document.body; dom.pre = $("pre"); dom.ccp = $("ccp"); dom.bt = $("bt"); dom.SelectPicture = $("SelectPicture"); dom.prea = $("prea"); dom.preb = $("preb"); dom.prec = $("prec"); dom.ctna = $("ctna"); dom.ctnb = $("ctnb"); dom.ctnc = $("ctnc"); dom.imga = $("imga"); dom.imgb = $("imgb"); dom.imgc = $("imgc"); dom.Y_OUT = $("Y_OUT"); dom.N_OUT = $("N_OUT"); dom.Y = $("Y"); dom.N = $("N"); dom.ctn = $("ctn"); dom.black_cover = $("black_cover"); dom.fixed_img = $("fixed_img"); dom.varied_div = $("varied_div"); dom.varied_div_img = $("varied_div_img"); dom.TopLeft = $("TopLeft"); dom.TopRight = $("TopRight"); dom.BottomRight = $("BottomRight"); dom.BottomLeft = $("BottomLeft");};var INIT_DOM = function () { setStyle2(dom.body, "width", screenW + "px", "height", screenH + "px"); dom.body.style.backgroundImage = get_random_bgimg(7);///////////////////// set_SelectPictureW(Math.floor(screenW / ccp.SelectPictureP1)); AddEvent2(dom.SelectPicture, EventsType.mouseover, SelectPicture_mouseover, EventsType.mouseleave, SelectPicture_mouseleave); AddEvent(dom.SelectPicture, EventsType.click, SelectPicture_click);///////////////////// ccp.preH = ccp.ccpH = ccp.btH = screenH - 2; ccp.ccpW = screenH + 100 - 2; ccp.preW = Math.ceil((screenW - (ccp.ccpW + 2)) / 2) - 2; ccp.btW = screenW - (ccp.ccpW + 2) - (ccp.preW + 2) - 2; setStyle2(dom.pre, "width", ccp.preW + "px", "height", ccp.preH + "px"); setStyle2(dom.ccp, "width", ccp.ccpW + "px", "height", ccp.ccpH + "px"); setStyle2(dom.bt, "width", ccp.btW + "px", "height", ccp.btH + "px"); Hide3(dom.pre, dom.ccp, dom.bt);/////////////////////};var EVENTS = function () { AddEvent(dom.varied_div, EventsType.mousedown, varied_div_mousedown);//varied_div AddEvent(dom.TopLeft, EventsType.mousedown, TopLeft_mousedown);//TopLeft AddEvent(dom.TopRight, EventsType.mousedown, TopRight_mousedown);//TopRight AddEvent(dom.BottomRight, EventsType.mousedown, BottomRight_mousedown);//BottomRight AddEvent(dom.BottomLeft, EventsType.mousedown, BottomLeft_mousedown);//BottomLeft AddEvent(dom.Y, EventsType.click, Y_click);//Y AddEvent(dom.N, EventsType.click, N_click);//N};var END = function () { AddEvent(document, EventsType.mousemove, cannotselect);};start(function () { GET_DOM(); INIT_DOM(); EVENTS(); END();});fun.js
var get_random_bgimg = function (n) { var m = Math.floor(Math.random() * n); var r = "url(Images/bg" + 6 + ".png)"; return r;};var set_SelectPictureW = function (W) { ccp.SelectPictureW = W; ccp.SelectPictureH = Math.floor(ccp.SelectPictureW / ccp.SelectPictureP2); ccp.SelectPictureL = Math.floor((screenW - ccp.SelectPictureW) / 2); ccp.SelectPictureT = Math.floor((screenH - ccp.SelectPictureH) / 2); ccp.SelectPictureFontSize = Math.floor(ccp.SelectPictureH / 1.5); setStyle(dom.SelectPicture, "font-size", ccp.SelectPictureFontSize + "px"); setLTWH(dom.SelectPicture, ccp.SelectPictureL, ccp.SelectPictureT, ccp.SelectPictureW, ccp.SelectPictureH);};var SelectPicture_mouseover = function () { set_SelectPictureW(ccp.SelectPictureW + 15);};var SelectPicture_mouseleave = function () { set_SelectPictureW(ccp.SelectPictureW - 15);};///////////////////////////////////////////////////var downX, downY, oldL, oldT, tempWH, tempL, tempT, dxMax, tempMaxL, tempMaxT;var varied_divLimit = function () { if (ccp.varied_divL < 0) ccp.varied_divL = 0; else if (ccp.varied_divL > ccp.varied_divMaxL) ccp.varied_divL = ccp.varied_divMaxL; if ((ccp.varied_divT < 0)) ccp.varied_divT = 0; else if (ccp.varied_divT > ccp.varied_divMaxT) ccp.varied_divT = ccp.varied_divMaxT;};var varied_div_mousedown = function (e) { if (e.button > 0) { varied_div_mouseup(); return false; } e.preventDefault && e.preventDefault(); downX = e.clientX; downY = e.clientY; oldL = ccp.varied_divL; oldT = ccp.varied_divT; AddEvent2(document, EventsType.mouseup, varied_div_mouseup, EventsType.mousemove, doc_varied_div_mousemove);};var doc_varied_div_mousemove = function (e) { ccp.varied_divL = oldL + e.clientX - downX; ccp.varied_divT = oldT + e.clientY - downY; varied_divLimit(); setLT(dom.varied_div, ccp.varied_divL, ccp.varied_divT); setvaried_div_img(); setpreimg();};var varied_div_mouseup = function () { DelEvent2(document, EventsType.mouseup, varied_div_mouseup, EventsType.mousemove, doc_varied_div_mousemove);};////////////////////////////////////////////////////var TopLeft_mousedown = function (e) { if (e.button > 0) { TopLeft_mouseup(); return false; } e.preventDefault && e.preventDefault(); downX = e.clientX; downY = e.clientY; oldL = ccp.varied_divL; oldT = ccp.varied_divT; tempWH = ccp.varied_divWH; tempL = ccp.varied_divL; tempT = ccp.varied_divT; tempMaxL = ccp.varied_divMaxL; tempMaxT = ccp.varied_divMaxT; dxMax = tempL >= tempT ? tempT : tempL; AddEvent2(document, EventsType.mouseup, TopLeft_mouseup, EventsType.mousemove, doc_TopLeft_mousemove);};var doc_TopLeft_mousemove = function (e) { varied_div_mouseup();//移动事件屏蔽，非常重要 var dx = e.clientY - downY; if (dx < 0 && Math.abs(dx) > dxMax) { dx = -dxMax; } else if (dx > 0 && dx > tempWH - cfg.varied_divMIN) { dx = tempWH - cfg.varied_divMIN; } ccp.varied_divMaxL = tempMaxL + dx; ccp.varied_divMaxT = tempMaxT + dx; ccp.varied_divL = oldL + dx; ccp.varied_divT = oldT + dx; ccp.varied_divWH = tempWH - dx; setLTWH(dom.varied_div, ccp.varied_divL, ccp.varied_divT, ccp.varied_divWH, ccp.varied_divWH); setvaried_div_img(); setpreimg();};var TopLeft_mouseup = function () { DelEvent2(document, EventsType.mouseup, TopLeft_mouseup, EventsType.mousemove, 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 = ccp.varied_divL; oldT = ccp.varied_divT; tempWH = ccp.varied_divWH; tempL = ccp.imgW - ccp.varied_divL - ccp.varied_divWH; tempT = ccp.varied_divT; tempMaxL = ccp.varied_divMaxL; tempMaxT = ccp.varied_divMaxT; dxMax = tempL >= tempT ? tempT : tempL; AddEvent2(document, EventsType.mouseup, TopRight_mouseup, EventsType.mousemove, doc_TopRight_mousemove);};var doc_TopRight_mousemove = function (e) { varied_div_mouseup();//移动事件屏蔽，非常重要 var dx = e.clientY - downY; if (dx < 0 && Math.abs(dx) > dxMax) { dx = -dxMax; } else if (dx > 0 && dx > tempWH - cfg.varied_divMIN) { dx = tempWH - cfg.varied_divMIN; } ccp.varied_divMaxL = tempMaxL + dx; ccp.varied_divMaxT = tempMaxT + dx; ccp.varied_divL = oldL; ccp.varied_divT = oldT + dx; ccp.varied_divWH = tempWH - dx; setLTWH(dom.varied_div, ccp.varied_divL, ccp.varied_divT, ccp.varied_divWH, ccp.varied_divWH); setvaried_div_img(); setpreimg();};var TopRight_mouseup = function () { DelEvent2(document, EventsType.mouseup, TopRight_mouseup, EventsType.mousemove, 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 = ccp.varied_divL; oldT = ccp.varied_divT; tempWH = ccp.varied_divWH; tempL = ccp.imgW - ccp.varied_divL - ccp.varied_divWH; tempT = ccp.imgH - ccp.varied_divT - ccp.varied_divWH; tempMaxL = ccp.varied_divMaxL; tempMaxT = ccp.varied_divMaxT; dxMax = tempL >= tempT ? tempT : tempL; AddEvent2(document, EventsType.mouseup, BottomRight_mouseup, EventsType.mousemove, doc_BottomRight_mousemove);};var doc_BottomRight_mousemove = function (e) { varied_div_mouseup();//移动事件屏蔽，非常重要 var dx = e.clientY - downY; if (dx > 0 && dx > dxMax) { dx = dxMax; } else if (dx < 0 && Math.abs(dx) > tempWH - cfg.varied_divMIN) { dx = -(tempWH - cfg.varied_divMIN); } ccp.varied_divMaxL = tempMaxL - dx; ccp.varied_divMaxT = tempMaxT - dx; ccp.varied_divL = oldL; ccp.varied_divT = oldT; ccp.varied_divWH = tempWH + dx; setLTWH(dom.varied_div, ccp.varied_divL, ccp.varied_divT, ccp.varied_divWH, ccp.varied_divWH); setvaried_div_img(); setpreimg();};var BottomRight_mouseup = function () { DelEvent2(document, EventsType.mouseup, BottomRight_mouseup, EventsType.mousemove, 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 = ccp.varied_divL; oldT = ccp.varied_divT; tempWH = ccp.varied_divWH; tempL = ccp.varied_divL; tempT = ccp.imgH - ccp.varied_divT - ccp.varied_divWH; tempMaxL = ccp.varied_divMaxL; tempMaxT = ccp.varied_divMaxT; dxMax = tempL >= tempT ? tempT : tempL; AddEvent2(document, EventsType.mouseup, BottomLeft_mouseup, EventsType.mousemove, doc_BottomLeft_mousemove);};var doc_BottomLeft_mousemove = function (e) { varied_div_mouseup();//移动事件屏蔽，非常重要 var dx = e.clientY - downY; if (dx > 0 && dx > dxMax) { dx = dxMax; } else if (dx < 0 && Math.abs(dx) > tempWH - cfg.varied_divMIN) { dx = -(tempWH - cfg.varied_divMIN); } ccp.varied_divMaxL = tempMaxL - dx; ccp.varied_divMaxT = tempMaxT - dx; ccp.varied_divL = oldL - dx; ccp.varied_divT = oldT; ccp.varied_divWH = tempWH + dx; setLTWH(dom.varied_div, ccp.varied_divL, ccp.varied_divT, ccp.varied_divWH, ccp.varied_divWH); setvaried_div_img(); setpreimg();};var BottomLeft_mouseup = function () { DelEvent2(document, EventsType.mouseup, BottomLeft_mouseup, EventsType.mousemove, doc_BottomLeft_mousemove);};///////////////////////////////////////////////////var getDATA = function () { var parameter = location.search; //获取url中"?"符后的字串 if (parameter.length == 0) { return 666; } else { var ss = parameter.split("&"); url = ss[0].split("=")[1]; cfg.needWH = ss[1].split("=")[1]; } if (url.length == 0) { return 777; } else if (cfg.needWH == 0) { return 888; } else if (cfg.needWH > 1000) { return 999; } var canvas = document.createElement("canvas"); canvas.style.display = "none"; var ctx = canvas.getContext("2d"); ctx.fillStyle = "#FFFFFF"; canvas.width = canvas.height = cfg.needWH; ctx.fillRect(0, 0, cfg.needWH, cfg.needWH); var a = Math.ceil(ccp.varied_divL * ccp.imgN); var b = Math.ceil(ccp.varied_divT * ccp.imgN); var c = Math.ceil(ccp.varied_divWH * ccp.imgN); ctx.drawImage(dom.fixed_img, a, b, c, c, 0, 0, cfg.needWH, cfg.needWH); return canvas.toDataURL(ccp.imgtype, 1);};var callback = function () { var txt = xmlReq.responseText; alert(txt); window.opener = null; window.open('', '_self'); window.close();};var Y_click = function () { var DATA = getDATA(); DATA == 666 && alert("没有参数"); DATA == 777 && alert("没有返回地址"); DATA == 888 && alert("未给出返回图片大小"); DATA == 999 && alert("图片大小不能超过 1000 X 1000"); if (DATA == 666 || DATA == 777 || DATA == 888 || DATA == 999) { window.opener = null; window.open('', '_self'); window.close(); }//没有参数或参数错误关闭页面 method = "post"; msg = ""; AJAX(url, method, "DATA=" + DATA, callback);};var N_click = function () { Hide3(dom.pre, dom.ccp, dom.bt);};///////////////////////////////////////////////////var check_imgtype = function () { if (!inArray(ccp.imgtype, cfg.imgtype)) { alert("请选择正确的图片类型"); return false; } else { return true; }};var check_imgsize = function () { if (ccp.imgsize > cfg.imgsize) { alert("图片不能超过"+(cfg.imgsize/1024)/1024+"M"); return false; } else { return true; }};var set_pre = function () { ccp.preaWH = Math.round(ccp.preW * 0.6); ccp.prebWH = Math.round(ccp.preW * 0.5); ccp.precWH = Math.round(ccp.preW * 0.4); ccp.preaL = Math.round((ccp.preW - ccp.preaWH) / 2); ccp.prebL = Math.round((ccp.preW - ccp.prebWH) / 2); ccp.precL = Math.round((ccp.preW - ccp.precWH) / 2); ccp.pre4 = Math.round((ccp.preH - ccp.preaWH - ccp.prebWH - ccp.precWH) / 4); ccp.preaT = ccp.pre4; ccp.prebT = ccp.pre4 * 2 + ccp.preaWH; ccp.precT = ccp.pre4 * 3 + ccp.preaWH + ccp.prebWH; setLTWH(dom.prea, ccp.preaL, ccp.preaT, ccp.preaWH, ccp.preaWH); setLTWH(dom.preb, ccp.prebL, ccp.prebT, ccp.prebWH, ccp.prebWH); setLTWH(dom.prec, ccp.precL, ccp.precT, ccp.precWH, ccp.precWH); //////////////////////////////////////////////////////////////// ccp.ctnaWH = ccp.preaWH - ccp.ctnLT * 2; ccp.ctnbWH = ccp.prebWH - ccp.ctnLT * 2; ccp.ctncWH = ccp.precWH - ccp.ctnLT * 2; setLTWH(dom.ctna, ccp.ctnLT, ccp.ctnLT, ccp.ctnaWH, ccp.ctnaWH); setLTWH(dom.ctnb, ccp.ctnLT, ccp.ctnLT, ccp.ctnbWH, ccp.ctnbWH); setLTWH(dom.ctnc, ccp.ctnLT, ccp.ctnLT, ccp.ctncWH, ccp.ctncWH); dom.imga.src = dom.imgb.src = dom.imgc.src = ccp.imgURL;};var setYN = function (dom, n) { ccp.YNWH = ccp.YN_OUTWH - n * 2; setStyle(dom, "font-size", Math.floor(ccp.YNWH * 0.9) + "px"); setLTWH(dom, n, n, ccp.YNWH, ccp.YNWH);};var Y_mouseover = function () { setYN(dom.Y, ccp.YNLT2);};var Y_mouseleave = function () { setYN(dom.Y, ccp.YNLT1);};var N_mouseover = function () { setYN(dom.N, ccp.YNLT2);};var N_mouseleave = function () { setYN(dom.N, ccp.YNLT1);};var set_bt = function () { ccp.YN_OUTWH = Math.round(ccp.btW * 0.6); ccp.YN_OUTR = Math.round((ccp.btW - ccp.YN_OUTWH) / 2); ccp.YN3 = Math.round((ccp.btH - ccp.YN_OUTWH * 2) / 3); ccp.Y_OUTT = ccp.YN3; ccp.N_OUTT = ccp.YN3 * 2 + ccp.YN_OUTWH; setRTWH(dom.Y_OUT, ccp.YN_OUTR, ccp.Y_OUTT, ccp.YN_OUTWH, ccp.YN_OUTWH); setRTWH(dom.N_OUT, ccp.YN_OUTR, ccp.N_OUTT, ccp.YN_OUTWH, ccp.YN_OUTWH); setYN(dom.Y, ccp.YNLT1); setYN(dom.N, ccp.YNLT1); AddEvent2(dom.Y, EventsType.mouseover, Y_mouseover, EventsType.mouseleave, Y_mouseleave); AddEvent2(dom.N, EventsType.mouseover, N_mouseover, EventsType.mouseleave, N_mouseleave);};var setvaried_div = function () { if (ccp.imgW > ccp.imgH) { ccp.varied_divWH = ccp.imgH < cfg.varied_divDEFAULT ? ccp.imgH : cfg.varied_divDEFAULT; } else { ccp.varied_divWH = ccp.imgW < cfg.varied_divDEFAULT ? ccp.imgW : cfg.varied_divDEFAULT; } ccp.varied_divL = Math.round((ccp.imgW - ccp.varied_divWH) / 2); ccp.varied_divT = Math.round((ccp.imgH - ccp.varied_divWH) / 2); ccp.varied_divMaxL = ccp.imgW - ccp.varied_divWH; ccp.varied_divMaxT = ccp.imgH - ccp.varied_divWH; setLTWH(dom.varied_div, ccp.varied_divL, ccp.varied_divT, ccp.varied_divWH, ccp.varied_divWH);};var setvaried_div_img = function () { ccp.varied_div_imgL = -ccp.varied_divL; ccp.varied_div_imgT = -ccp.varied_divT; setLT(dom.varied_div_img, ccp.varied_div_imgL, ccp.varied_div_imgT);};var setpreimg = function () { var p1, p2, p3; p1 = ccp.ctnaWH / ccp.varied_divWH; p2 = ccp.ctnbWH / ccp.varied_divWH; p3 = ccp.ctncWH / ccp.varied_divWH; ccp.imgaW = Math.round(p1 * ccp.imgW); ccp.imgaH = Math.round(p1 * ccp.imgH); ccp.imgaL = Math.round(p1 * ccp.varied_div_imgL); ccp.imgaT = Math.round(p1 * ccp.varied_div_imgT); ccp.imgbW = Math.round(p2 * ccp.imgW); ccp.imgbH = Math.round(p2 * ccp.imgH); ccp.imgbL = Math.round(p2 * ccp.varied_div_imgL); ccp.imgbT = Math.round(p2 * ccp.varied_div_imgT); ccp.imgcW = Math.round(p3 * ccp.imgW); ccp.imgcH = Math.round(p3 * ccp.imgH); ccp.imgcL = Math.round(p3 * ccp.varied_div_imgL); ccp.imgcT = Math.round(p3 * ccp.varied_div_imgT); setLTWH(dom.imga, ccp.imgaL, ccp.imgaT, ccp.imgaW, ccp.imgaH); setLTWH(dom.imgb, ccp.imgbL, ccp.imgbT, ccp.imgbW, ccp.imgbH); setLTWH(dom.imgc, ccp.imgcL, ccp.imgcT, ccp.imgcW, ccp.imgcH);};var set_ccp = function () { ccp.ctnL = ccp.preW + 3 + Math.ceil((ccp.ccpW - ccp.imgW) / 2); ccp.ctnT = 1 + Math.ceil((ccp.ccpH - ccp.imgH) / 2); setLTWH(dom.ctn, ccp.ctnL, ccp.ctnT, ccp.imgW, ccp.imgH); ccp.black_coverL = ccp.preW + 3; ccp.black_coverT = 1; setLTWH(dom.black_cover, ccp.black_coverL, ccp.black_coverT, ccp.ccpW, ccp.ccpH); setLTWH(dom.fixed_img, 0, 0, ccp.imgW, ccp.imgH); dom.fixed_img.src = ccp.imgURL; setvaried_div(); setWH(dom.varied_div_img, ccp.imgW, ccp.imgH); dom.varied_div_img.src = ccp.imgURL; setvaried_div_img(); setpreimg();};var setStart = function () { set_pre(); set_bt(); set_ccp(); Show3(dom.pre, dom.ccp, dom.bt);};var setImgWH = function (src, type) { var image = new Image(); image.onload = function () { var width = this.width, height = this.height;//图片的宽高 var p = width / height; if (p > 1) { if (p > ccp.ccpW / 50) { alert("图片宽高比不能超过" + p); return; } else { if (height < 50) { ccp.imgN = height / 50; ccp.imgH = 50; ccp.imgW = Math.round(ccp.imgH * p); } else if (width > ccp.ccpW) { ccp.imgN = width / ccp.ccpW; ccp.imgW = ccp.ccpW; ccp.imgH = Math.round(ccp.imgW / p); } else { ccp.imgN = 1; ccp.imgW = width; ccp.imgH = height; } } } else { if (p < 50 / ccp.ccpH) { alert("图片宽高比不能小于" + p); return; } else { if (width < 50) { ccp.imgN = width / 50; ccp.imgW = 50; ccp.imgH = Math.round(ccp.imgW / p); } else if (height > ccp.ccpH) { ccp.imgN = height / ccp.ccpH; ccp.imgH = ccp.ccpH; ccp.imgW = Math.round(ccp.imgH * p); } else { ccp.imgN = 1; ccp.imgW = width; ccp.imgH = height; } } } ccp.imgURL = this.src; delete image; setStart(); }; image.onerror = function () { alert("图片已损坏，请上传正确图片"); }; image.src = src;};var SelectPicture_click = function () { dom.upfile = document.createElement("input"); setAttr2(dom.upfile, "type", "file", "id", "upfile"); dom.upfile.click(); dom.upfile.onchange = function () { ccp.file = this.files[0]; ccp.imgtype = ccp.file.type; if (!check_imgtype()) { return; } //检查文件类型 ccp.imgsize = ccp.file.size; if (!check_imgsize()) { return; }; //检查图片大小 var reader = new FileReader(); reader.onload = function () { setImgWH(this.result, ccp.imgtype); }; reader.readAsDataURL(ccp.file); };};ccp.css
*{ margin:0px; padding:0px;}#SelectPicture{ position:absolute; border:3px solid #ff6a00; border-radius:8px; color:#ff6a00; text-align:center; font-family:'Microsoft YaHei'; cursor:pointer;}#upfile{ display:none;}#pre,#ccp,#bt{ float:left; z-index:1; border:1px solid #ffffff;}#ccp{ border:1px dashed #808080; border-left:1px dashed #808080; border-right:1px dashed #808080;}#prea,#preb,#prec{ position:absolute; background-color:#ff6a00; border-radius:7px;}#ctna,#ctnb,#ctnc{ position:absolute; background-color:#ffffff; overflow:hidden;}#imga,#imgb,#imgc{ position:absolute; left:0px; top:0px;}#Y_OUT,#N_OUT{ position:absolute;}#Y,#N{ /* background-color:#ff6a00;*/ position:absolute; text-align:center; border:3px solid #ff6a00; border-radius:50%; color:#ff6a00; font-family:Arial; cursor:pointer;}#ctn{ position:absolute; background-color:blueviolet; overflow:hidden;}#black_cover{ position:absolute; background-color:black; opacity:0.6; z-index:3;}#fixed_img{ position:absolute;}#varied_div{ position:absolute; z-index:4; overflow: hidden; cursor:move;}#BottomRight,#TopRight,#TopLeft,#BottomLeft {background:#D6FB66;display:block; width:6px;height:6px;position:absolute;z-index:5; 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;}#varied_div_img{ position:absolute; z-index:5;} 0 1
- js 头像上传（图片截取） 插件 全屏高清版 源码
- 截取图片生成头像插件
- JavaScript 头像上传插件源码
- <<爬坑一>>有关上传头像中的截取图片
- js（头像，图片）上传，如何立即展示？图片详解。
- SWFupload上传插件案例及头像的截取
- Android个人中心的头像上传，图片编码及截取
- django & cropper.js &bootstrap 实现头像截取并上传
- 富头像上传编辑器（flash头像上传插件）
- 图片全屏显示——js插件
- shearphoto头像截取，切图头像上传，JS+PHP开发，发布了
- 七牛上传base64图片（附js裁剪头像，上传七牛）
- jq实现截取头像上传
- 头像截取上传并预览
- 20130420 js的图片上传和截取
- shearphoto2.0头像截取插件
- cropper插件实现头像截取
- 文件上传之——用SWF插件实现文件异步上传和头像截取
- hdu 2588 GCD
- 通解DNS（下）
- 了解RxJava之基础(一)
- Cocos2dx动作篇
- 反向传播BP 算法之一种直观的解释
- js 头像上传（图片截取） 插件 全屏高清版 源码
- MySQL存储过程和代码分别生成订单号，MySQL拾遗
- leetcode 每日一题 257. Binary Tree Paths
- windows下MSVC兼容的dirent.h
- 十大类库
- MatLab 代码优化 Fast your MatLab code. (2) 寻找性能瓶颈
- 终极版：Andorid手机流量监测思路与代码实现（一）
- androidStudio中出现finished with non-zero exit value 2 或者 finished with non-zero exit value 1
- sqlite3之sqlite3_busy_handler使用详解
