index.html
ccp 选 择 图 片
y
n
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 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 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 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 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 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 ccp.ccpw / 50) { alert(图片宽高比不能超过 + p); return; } else { if (height 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 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; }
以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。