这篇文章主要为大家详细介绍了全屏 js 头像上传插件源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
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 的 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 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 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:"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是否存在于数组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 Hide = function (dom) {
- dom.style.display = "none";
- };// 隐藏dom
- var Hide3 = function (dom1,dom2,dom3) {
- dom1.style.display = "none";
- dom2.style.display = "none";
- dom3.style.display = "none";
- };// 隐藏3个dom
- var Show = function (dom) {
- dom.style.display = "inline";
- }; // 显示dom
- var 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;
- /* 环境 */
ccp.js
- 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;
- }
来源: http://www.phperz.com/article/17/0219/266513.html