全屏js头像上传插件源码高清版

2024-03-20 11:07:02 41

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

index.html

<!DOCTYPEhtml>

<html>
<head>
<metaname="viewport"content="width=device-width"/>
<title>ccp</title>
<linkhref="Content/ccp.css"rel="stylesheet"/>
<scriptsrc="Scripts/cxc.js"></script>
<scriptsrc="Scripts/ccp.js"></script>
<scriptsrc="Scripts/fun.js"></script>
</head>
<body>
<divid="SelectPicture">选择图片</div>

<divid="pre">
<divid="prea">
<divid="ctna">
<imgid="imga"/>
</div>
</div>
<divid="preb">
<divid="ctnb">
<imgid="imgb"/>
</div>
</div>
<divid="prec">
<divid="ctnc">
<imgid="imgc"/>
</div>
</div>
</div>

<divid="ccp">
<divid="ctn">
<imgid="fixed_img"/>
<divid="varied_div">
<imgid="varied_div_img"/>
<iid="TopLeft"></i>
<iid="TopRight"></i>
<iid="BottomRight"></i>
<iid="BottomLeft"></i>
</div>
</div>
<divid="black_cover"></div>
</div>

<divid="bt">
<divid="Y_OUT">
<divid="Y">Y</div>
</div>
<divid="N_OUT">
<divid="N">N</div>
</div>
</div>
</body>
</html>

cxc.js

/*cxc.js频繁操作公共接口*/
var$=function(id){
returndocument.getElementById(id);
};//通过id获取dom对象
varA=function(msg){
alert(msg);
};//alert的简写
varEmptyFun=function(){
};//空方法
varsetL=function(dom,L){
dom.style.left=L+"px";
};//设置dom的left
varsetT=function(dom,T){
dom.style.top=T+"px";
};//设置dom的top
varsetLT=function(dom,L,T){
dom.style.left=L+"px";
dom.style.top=T+"px";
};//同时设置dom的lefttop
vargetLT=function(dom){
return[parseInt(dom.style.left),parseInt(dom.style.top)];
};//返回dom的left和top值，类型为整型数组[int,int]
varsetW=function(W){
dom.style.width=W+"px";
};//设置dom的width
varsetH=function(H){
dom.style.height=H+"px";
};//设置dom的height
varsetWH=function(dom,W,H){
dom.style.width=W+"px";
dom.style.height=H+"px";
};//同时设置dom的widthheight
vargetWH=function(dom){
return[parseInt(dom.style.width),parseInt(dom.style.height)];
};//返回dom的width和height值，类型为整型数组[int,int]
varsetLTWH=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的lefttopwidthheight
varsetRTWH=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的lefttopwidthheight
vargetLTWH=function(dom){
return[parseInt(dom.style.left),parseInt(dom.style.top),parseInt(dom.style.width),parseInt(dom.style.height)]
};//返回dom的lefttopwidthheight值，类型为整型数组[int,int,int,int]
varsetcursor=function(dom,shape){
dom.style.cursor=shape;
};//设置鼠标经过dom的指针形状
varEventsType={//事件类型
click:"click",
mousedown:"mousedown",
mouseup:"mouseup",
mouseover:"mouseover",
mouseleave:"mouseleave",
mousemove:"mousemove",
DOMContentLoaded:"DOMContentLoaded",
};
varAddEvent=function(dom,type,fun){
dom.addEventListener(type,fun,false);
};//添加dom对象的事件监听方法
varAddEvent2=function(dom,type1,fun1,type2,fun2){
dom.addEventListener(type1,fun1,false);
dom.addEventListener(type2,fun2,false);
};//一次添加dom的两个事件监听方法
varAddEvent3=function(dom,type1,fun1,type2,fun2,type3,fun3){
dom.addEventListener(type1,fun1,false);
dom.addEventListener(type2,fun2,false);
dom.addEventListener(type3,fun3,false);
};//一次添加dom的三个事件监听方法
varDelEvent=function(dom,type,fun){
dom.removeEventListener(type,fun,false);
};//删除dom对象的事件监听方法
varDelEvent2=function(dom,type1,fun1,type2,fun2){
dom.removeEventListener(type1,fun1,false);
dom.removeEventListener(type2,fun2,false);
};//一次删除dom对象的两个事件监听方法
varDelEvent3=function(dom,type1,fun1,type2,fun2,type3,fun3){
dom.removeEventListener(type1,fun1,false);
dom.removeEventListener(type2,fun2,false);
dom.removeEventListener(type3,fun3,false);
};//一次删除dom对象的三个事件监听方法
varinArray=function(str,arr){
for(vari=0;i<arr.length;i++){
if(str==arr[i]){
returntrue;
}
}
returnfalse;
};//判断字符串str是否存在于数组arr
varcannotselect=function(){
window.getSelection().removeAllRanges();
};//页面元素（文字、图片等）不能被选中
varsetStyle=function(dom,styleName,styleValue){
dom.setAttribute("style",styleName+":"+styleValue+";");
};//设置dom的一个style属性值
varsetStyle2=function(dom,styleName1,styleValue1,styleName2,styleValue2){
dom.setAttribute("style",styleName1+":"+styleValue1+";"+styleName2+":"+styleValue2+";");
};//一次设置dom的两个style属性值
vardelStyle=function(dom,styleName){
dom.removeAttribute("style",styleName);
};//删除dom的一个style属性值
vardelStyle2=function(dom,styleName1,styleName2){
dom.removeAttribute("style",styleName1);
dom.removeAttribute("style",styleName2);
};//一次删除dom的两个style属性值
varsetAttr=function(dom,attrName,attrValue){
dom.setAttribute(attrName,attrValue);
};//设置dom的一个属性值
varsetAttr2=function(dom,attrName1,attrValue1,attrName2,attrValue2){
dom.setAttribute(attrName1,attrValue1);
dom.setAttribute(attrName2,attrValue2);
};//一次设置dom的两个属性值
vardelAttr=function(dom,attrName){
dom.removeAttribute(attrName);
};//删除dom的一个属性值
vardelAttr2=function(dom,attrName1,attrName2){
dom.removeAttribute(attrName1);
dom.removeAttribute(attrName2);
};//删除dom的两个属性值
varHide=function(dom){
dom.style.display="none";
};//隐藏dom
varHide3=function(dom1,dom2,dom3){
dom1.style.display="none";
dom2.style.display="none";
dom3.style.display="none";
};//隐藏3个dom
varShow=function(dom){
dom.style.display="inline";
};//显示dom
varShow3=function(dom1,dom2,dom3){
dom1.style.display="inline";
dom2.style.display="inline";
dom3.style.display="inline";
};//显示3个dom
/*cxc.js频繁操作公共接口*/

/*AJAX接口*/
varurl,method,msg;
varxmlReq=newXMLHttpRequest();
varAJAX=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("ajaxstatusis"+xmlReq.status);
}
}
};
xmlReq.send(msg);
};
/*AJAX接口*/

/*入口*/
varstart=function(fun){
varbegin=function(){
DelEvent(document,EventsType.DOMContentLoaded,begin);
fun();
};
AddEvent(document,EventsType.DOMContentLoaded,begin);
};
/*入口*/

/*环境*/
varscreenW=window.innerWidth;
varscreenH=window.innerHeight;
/*环境*/

ccp.js

varcfg={
imgtype:["image/jpeg","image/png","image/gif","image/bmp"],
imgsize:5*1024*1024,
varied_divMIN:50,
varied_divDEFAULT:100,
needWH:0,
};
vardom={
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,
};
varccp={
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,
/////////////////////////
};
varGET_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");
};
varINIT_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);/////////////////////
};
varEVENTS=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
};
varEND=function(){
AddEvent(document,EventsType.mousemove,cannotselect);
};
start(function(){
GET_DOM();
INIT_DOM();
EVENTS();
END();
});

fun.js

varget_random_bgimg=function(n){
varm=Math.floor(Math.random()*n);
varr="url(Images/bg"+6+".png)";
returnr;
};
varset_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);
};
varSelectPicture_mouseover=function(){
set_SelectPictureW(ccp.SelectPictureW+15);
};
varSelectPicture_mouseleave=function(){
set_SelectPictureW(ccp.SelectPictureW-15);
};
///////////////////////////////////////////////////
vardownX,downY,oldL,oldT,tempWH,tempL,tempT,dxMax,tempMaxL,tempMaxT;
varvaried_divLimit=function(){
if(ccp.varied_divL<0)
ccp.varied_divL=0;
elseif(ccp.varied_divL>ccp.varied_divMaxL)
ccp.varied_divL=ccp.varied_divMaxL;
if((ccp.varied_divT<0))
ccp.varied_divT=0;
elseif(ccp.varied_divT>ccp.varied_divMaxT)
ccp.varied_divT=ccp.varied_divMaxT;
};
varvaried_div_mousedown=function(e){
if(e.button>0){
varied_div_mouseup();
returnfalse;
}
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);
};
vardoc_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();
};
varvaried_div_mouseup=function(){
DelEvent2(document,EventsType.mouseup,varied_div_mouseup,EventsType.mousemove,doc_varied_div_mousemove);
};
////////////////////////////////////////////////////
varTopLeft_mousedown=function(e){
if(e.button>0){
TopLeft_mouseup();
returnfalse;
}
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);
};
vardoc_TopLeft_mousemove=function(e){
varied_div_mouseup();//移动事件屏蔽，非常重要
vardx=e.clientY-downY;
if(dx<0&&Math.abs(dx)>dxMax){
dx=-dxMax;
}
elseif(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();
};
varTopLeft_mouseup=function(){
DelEvent2(document,EventsType.mouseup,TopLeft_mouseup,EventsType.mousemove,doc_TopLeft_mousemove);
};
////////////////////////////////////////////////////
varTopRight_mousedown=function(e){
if(e.button>0){
TopRight_mouseup();
returnfalse;
}
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);
};
vardoc_TopRight_mousemove=function(e){
varied_div_mouseup();//移动事件屏蔽，非常重要
vardx=e.clientY-downY;
if(dx<0&&Math.abs(dx)>dxMax){
dx=-dxMax;
}
elseif(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();
};
varTopRight_mouseup=function(){
DelEvent2(document,EventsType.mouseup,TopRight_mouseup,EventsType.mousemove,doc_TopRight_mousemove);
};
///////////////////////////////////////////////////
varBottomRight_mousedown=function(e){
if(e.button>0){
BottomRight_mouseup();
returnfalse;
}
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);
};
vardoc_BottomRight_mousemove=function(e){
varied_div_mouseup();//移动事件屏蔽，非常重要
vardx=e.clientY-downY;
if(dx>0&&dx>dxMax){
dx=dxMax;
}
elseif(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();
};
varBottomRight_mouseup=function(){
DelEvent2(document,EventsType.mouseup,BottomRight_mouseup,EventsType.mousemove,doc_BottomRight_mousemove);
};
///////////////////////////////////////////////////
varBottomLeft_mousedown=function(e){
if(e.button>0){
BottomLeft_mouseup();
returnfalse;
}
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);
};
vardoc_BottomLeft_mousemove=function(e){
varied_div_mouseup();//移动事件屏蔽，非常重要
vardx=e.clientY-downY;
if(dx>0&&dx>dxMax){
dx=dxMax;
}
elseif(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();
};
varBottomLeft_mouseup=function(){
DelEvent2(document,EventsType.mouseup,BottomLeft_mouseup,EventsType.mousemove,doc_BottomLeft_mousemove);
};
///////////////////////////////////////////////////
vargetDATA=function(){
varparameter=location.search;//获取url中"?"符后的字串
if(parameter.length==0){
return666;
}else{
varss=parameter.split("&");
url=ss[0].split("=")[1];
cfg.needWH=ss[1].split("=")[1];
}
if(url.length==0){
return777;
}elseif(cfg.needWH==0){
return888;
}elseif(cfg.needWH>1000){
return999;
}

varcanvas=document.createElement("canvas");
canvas.style.display="none";
varctx=canvas.getContext("2d");
ctx.fillStyle="#FFFFFF";
canvas.width=canvas.height=cfg.needWH;
ctx.fillRect(0,0,cfg.needWH,cfg.needWH);
vara=Math.ceil(ccp.varied_divL*ccp.imgN);
varb=Math.ceil(ccp.varied_divT*ccp.imgN);
varc=Math.ceil(ccp.varied_divWH*ccp.imgN);
ctx.drawImage(dom.fixed_img,a,b,c,c,0,0,cfg.needWH,cfg.needWH);
returncanvas.toDataURL(ccp.imgtype,1);
};
varcallback=function(){
vartxt=xmlReq.responseText;
alert(txt);
window.opener=null;
window.open('','_self');
window.close();
};
varY_click=function(){
varDATA=getDATA();
DATA==666&&alert("没有参数");
DATA==777&&alert("没有返回地址");
DATA==888&&alert("未给出返回图片大小");
DATA==999&&alert("图片大小不能超过1000X1000");
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);
};
varN_click=function(){
Hide3(dom.pre,dom.ccp,dom.bt);
};
///////////////////////////////////////////////////
varcheck_imgtype=function(){
if(!inArray(ccp.imgtype,cfg.imgtype)){
alert("请选择正确的图片类型");
returnfalse;
}else{returntrue;}
};
varcheck_imgsize=function(){
if(ccp.imgsize>cfg.imgsize){
alert("图片不能超过"+(cfg.imgsize/1024)/1024+"M");
returnfalse;
}else{returntrue;}
};
varset_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;
};
varsetYN=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);
};
varY_mouseover=function(){
setYN(dom.Y,ccp.YNLT2);
};
varY_mouseleave=function(){
setYN(dom.Y,ccp.YNLT1);
};
varN_mouseover=function(){
setYN(dom.N,ccp.YNLT2);
};
varN_mouseleave=function(){
setYN(dom.N,ccp.YNLT1);
};
varset_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);
};
varsetvaried_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);
};
varsetvaried_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);
};
varsetpreimg=function(){
varp1,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);
};
varset_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();
};
varsetStart=function(){
set_pre();
set_bt();
set_ccp();
Show3(dom.pre,dom.ccp,dom.bt);
};
varsetImgWH=function(src,type){
varimage=newImage();
image.onload=function(){
varwidth=this.width,height=this.height;//图片的宽高
varp=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);
}
elseif(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);
}
elseif(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;
deleteimage;
setStart();
};
image.onerror=function(){
alert("图片已损坏，请上传正确图片");
};
image.src=src;
};
varSelectPicture_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;
};//检查图片大小
varreader=newFileReader();
reader.onload=function(){
setImgWH(this.result,ccp.imgtype);
};
reader.readAsDataURL(ccp.file);
};
};

ccp.css

*{
margin:0px;
padding:0px;
}
#SelectPicture{
position:absolute;
border:3pxsolid#ff6a00;
border-radius:8px;
color:#ff6a00;
text-align:center;
font-family:'MicrosoftYaHei';
cursor:pointer;
}
#upfile{
display:none;
}
#pre,#ccp,#bt{
float:left;
z-index:1;
border:1pxsolid#ffffff;
}
#ccp{
border:1pxdashed#808080;
border-left:1pxdashed#808080;
border-right:1pxdashed#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:3pxsolid#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程序设计有所帮助。

全屏js头像上传插件源码高清版

热门推荐

随机推荐