@ -0,0 +1,9 @@ |
|||
<IfModule mod_rewrite.c> |
|||
Options +FollowSymlinks -Multiviews |
|||
RewriteEngine On |
|||
|
|||
RewriteCond %{REQUEST_FILENAME} !-d |
|||
RewriteCond %{REQUEST_FILENAME} !-f |
|||
# RewriteRule ^(.*)$ index.php/$1 [QSA,PT,L] |
|||
RewriteRule ^(.*)$ index.php [L,E=PATH_INFO:$1] |
|||
</IfModule> |
|||
@ -0,0 +1,703 @@ |
|||
@charset "utf-8"; |
|||
/*公用开始*/ |
|||
img,div,i,em,a,body,p,H1,ul,li { |
|||
border-style:none; |
|||
list-style-type:none; |
|||
margin:0; |
|||
padding:0; |
|||
text-decoration:none |
|||
} |
|||
/*公用结束*/ |
|||
/*缓冲效果开始 2.3加入的*/ |
|||
#shearphoto_main { |
|||
visibility:hidden; |
|||
margin:0 auto; |
|||
} |
|||
#shearphoto_loading { |
|||
width:100px; |
|||
text-align:center; |
|||
line-height:130px; |
|||
color:#999; |
|||
margin:0 auto; |
|||
background:url(../images/loading.gif) no-repeat |
|||
} |
|||
/*缓冲效果结束*/ |
|||
/*头部部份开始*/ |
|||
.header { |
|||
height:65px; |
|||
margin-bottom:10px; |
|||
width:100%; |
|||
overflow:hidden; |
|||
background:url(../images/bg_headLine1.png) no-repeat 290px #505153; |
|||
} |
|||
.header A { |
|||
-moz-border-radius:5px; |
|||
border-radius:5px; |
|||
color:#FFF; |
|||
display:inline-block; |
|||
float:left; |
|||
font-size:15px; |
|||
font-weight:700; |
|||
line-height:50px; |
|||
text-align:center; |
|||
width:150px; |
|||
margin:7px 0 0 100px; |
|||
background:#3E8BFF; |
|||
} |
|||
.header A:hover { |
|||
text-decoration: underline; |
|||
background-color: #0F6FFF; |
|||
} |
|||
.header img { |
|||
display:inline-block; |
|||
float:left; |
|||
margin-left:20px |
|||
} |
|||
.header strong { |
|||
color:#FFF; |
|||
display:block; |
|||
float:right; |
|||
height:60px; |
|||
line-height:60px; |
|||
margin-right:20px |
|||
} |
|||
/*头部部份结束*/ |
|||
/*预览开始*/ |
|||
#shearphoto_main #preview { |
|||
float:left; |
|||
position: relative; |
|||
} |
|||
#shearphoto_main #preview a { |
|||
display:inline; |
|||
float:left; |
|||
-moz-border-radius:5px; |
|||
border-radius:5px; |
|||
-moz-box-shadow:1px 1px 3px 1px #999; |
|||
box-shadow:1px 1px 3px 1px #999; |
|||
overflow: hidden; |
|||
position: relative; |
|||
} |
|||
#shearphoto_main #preview a img { |
|||
position: relative; |
|||
} |
|||
/*预览结束*/ |
|||
.bottom a:hover { |
|||
color: #39F; |
|||
text-decoration: underline; |
|||
} |
|||
/*旋转开始*/ |
|||
#Shearbar #LeftRotate { |
|||
margin:0 10px; |
|||
} |
|||
#Shearbar #LeftRotate em,#Shearbar #RightRotate em { |
|||
display:inline-block; |
|||
height:21px; |
|||
vertical-align:middle; |
|||
width:15px; |
|||
margin:1px 3px 0 0; |
|||
background:url(../images/bch.jpg) no-repeat; |
|||
} |
|||
#Shearbar #LeftRotate,#Shearbar #RightRotate { |
|||
-moz-border-radius:5px; |
|||
border:1px solid #CCC; |
|||
border-radius:5px; |
|||
color:#666; |
|||
cursor:pointer; |
|||
float:left; |
|||
font-size:12px; |
|||
margin-top:-5px; |
|||
text-align:center; |
|||
width:50px; |
|||
} |
|||
#Shearbar #LeftRotate:hover,#Shearbar #RightRotate:hover { |
|||
border:1px solid #919191; |
|||
color:#414141 |
|||
} |
|||
#Shearbar #RightRotate { |
|||
margin-left:10px |
|||
} |
|||
#Shearbar #RightRotate em { |
|||
background-position:-91px 0; |
|||
margin:1px 0 0 3px; |
|||
} |
|||
#Shearbar .hint { |
|||
color:#333; |
|||
display:block; |
|||
float:left; |
|||
font-size:12px; |
|||
font-style:normal; |
|||
height:19px; |
|||
line-height:15px; |
|||
width:19px |
|||
} |
|||
#Shearbar .hint.L,#Shearbar .hint.R { |
|||
background:url(../images/zoom.png) no-repeat -2px -1px |
|||
} |
|||
#Shearbar .hint.R { |
|||
background-position: -43px -1px |
|||
} |
|||
/*旋转结束*/ |
|||
/*选择图片方式开始*/ |
|||
#shearphoto_main #SelectBox { |
|||
background:url(../images/bg.png); |
|||
position:absolute; |
|||
z-index:180 |
|||
} |
|||
#SelectBox #selectImage input { |
|||
height: 50px; |
|||
width: 224px; |
|||
background-color: #FFF; |
|||
filter:alpha(opacity=0); |
|||
opacity:0; |
|||
position: absolute; |
|||
float: left; |
|||
cursor: pointer; |
|||
display: block; |
|||
} |
|||
.displayNone { |
|||
display: none; |
|||
} |
|||
#SelectBox #selectImage,#SelectBox #PhotoLoading,#SelectBox #camerasImage { |
|||
-moz-border-radius:10px; |
|||
border-radius:10px; |
|||
-moz-box-shadow:2px 2px 7px 1px #3e4044; |
|||
box-shadow:2px 2px 7px 1px #3e4044; |
|||
display:block; |
|||
height:50px; |
|||
outline:0 none; |
|||
position:absolute; |
|||
width:223px; |
|||
overflow:hidden; |
|||
margin:-37px 0 0 -112px; |
|||
background:url(../images/Select_en-us.jpg) no-repeat; |
|||
} |
|||
#SelectBox #PhotoLoading { |
|||
background-position:0 -160px; |
|||
left:50%; |
|||
top:70% |
|||
} |
|||
#SelectBox #selectImage { |
|||
background-position:0 -15px; |
|||
left:50%; |
|||
top:35% |
|||
} |
|||
#SelectBox #camerasImage { |
|||
background-position:0 -85px; |
|||
left:50%; |
|||
top:79% |
|||
} |
|||
#SelectBox #selectImage:hover,#SelectBox #PhotoLoading:hover,#SelectBox #camerasImage:hover { |
|||
border:3px solid #666; |
|||
margin:-37px 0 0 -112px; |
|||
} |
|||
/*选择图片方式结束*/ |
|||
/*工具条开始*/ |
|||
#shearphoto_main #Shearbar { |
|||
padding-top:10px; |
|||
width:442px; |
|||
margin:0 auto; |
|||
} |
|||
#Shearbar .Psava { |
|||
clear:both; |
|||
height:40px; |
|||
padding:20px 0 0 65px |
|||
} |
|||
#Shearbar .Psava #againIMG ,#Shearbar .Psava #saveShear { |
|||
background:url(../images/btn5.jpg) no-repeat; |
|||
color:#666; |
|||
float:left; |
|||
line-height:31px; |
|||
margin-right:20px; |
|||
text-align:center; |
|||
width:79px; |
|||
height: 31px; |
|||
} |
|||
#Shearbar .Psava #againIMG:hover { |
|||
background-position: 0px -31px; |
|||
} |
|||
#Shearbar .Psava #saveShear { |
|||
background-position: -79px 0px; |
|||
color:#FFF; |
|||
} |
|||
#Shearbar .Psava #saveShear:hover { |
|||
background-position:-79px -31px |
|||
} |
|||
#Shearbar #ZoomDist { |
|||
float:left; |
|||
height:20px; |
|||
position:relative; |
|||
width:120px |
|||
} |
|||
#Shearbar #ZoomDist #ZoomBar { |
|||
background:url(../images/ZoomBar.gif) no-repeat; |
|||
filter:alpha(opacity=80); |
|||
opacity:0.8; |
|||
height:20px; |
|||
left:0; |
|||
position:absolute; |
|||
width:15px |
|||
} |
|||
#ZoomDist #Zoomcentre { |
|||
filter:alpha(opacity=100); |
|||
height:9px; |
|||
left:50%; |
|||
top:25px; |
|||
position:absolute; |
|||
width:10px; |
|||
margin-left:-4px; |
|||
background:url(../images/Zoomcentre.jpg) no-repeat |
|||
} |
|||
#ZoomDist .progress { |
|||
-moz-border-radius:15px; |
|||
border-radius:15px; |
|||
background:#999; |
|||
display:block; |
|||
float:left; |
|||
height:8px; |
|||
margin-top:4px; |
|||
overflow:hidden; |
|||
width:100% |
|||
} |
|||
/*工具条结束*/ |
|||
/*主功能界面开始*/ |
|||
#shearphoto_main #black { |
|||
position:absolute; |
|||
z-index:99 |
|||
} |
|||
#shearphoto_main .primary { |
|||
float: left; |
|||
} |
|||
#shearphoto_main #main { |
|||
-moz-user-select:none; |
|||
-ms-user-select:none; |
|||
-webkit-user-select:none; |
|||
background:url(../images/bg.png); |
|||
overflow:hidden; |
|||
position:relative; |
|||
z-index:50; |
|||
border: 1px solid #CCC; |
|||
float: left; |
|||
} |
|||
#main .BigImg { |
|||
float:left; |
|||
position:relative; |
|||
z-index:51 |
|||
} |
|||
.MoveImg { |
|||
position:relative; |
|||
z-index:98; |
|||
max-width:300%; |
|||
} |
|||
#preview_img{ |
|||
max-width:300%; |
|||
} |
|||
#main #imgID { |
|||
display:block; |
|||
z-index:51 |
|||
} |
|||
#main #movebox { |
|||
position:absolute; |
|||
z-index:100; |
|||
float: left; |
|||
} |
|||
/*动态边框开始*/ |
|||
#movebox #borderTop,#movebox #borderLeft,#movebox #borderRight,#movebox #borderBottom { |
|||
background:url(../images/border.gif) #FFF; |
|||
display:inline-block; |
|||
filter:alpha(opacity=50); |
|||
opacity:0.5; |
|||
overflow:hidden; |
|||
position:absolute; |
|||
z-index:104; |
|||
} |
|||
#movebox #borderTop { |
|||
height:1px; |
|||
left:0; |
|||
top:0; |
|||
width:100%; |
|||
} |
|||
#movebox #borderLeft { |
|||
height:100%; |
|||
left:0; |
|||
top:0; |
|||
width:1px; |
|||
} |
|||
#movebox #borderRight { |
|||
height:100%; |
|||
right:0; |
|||
top:0; |
|||
width:1px; |
|||
} |
|||
#movebox #borderBottom { |
|||
bottom:0; |
|||
height:1px; |
|||
left:0; |
|||
width:100%; |
|||
} |
|||
/*动态边框结束*/ |
|||
/*拉伸截框的八个点开始*/ |
|||
#main #movebox #BottomRight,#main #movebox #TopRight,#main #movebox #Topleft,#main #movebox #Bottomleft,#main #movebox #Topmiddle,#main #movebox #leftmiddle,#main #movebox #Rightmiddle,#main #movebox #Bottommiddle { |
|||
background:#000; |
|||
border:1px solid #FFF; |
|||
bottom:-5px; |
|||
cursor:nw-resize; |
|||
display:block; |
|||
filter:alpha(opacity=50); |
|||
height:8px; |
|||
opacity:0.5; |
|||
overflow:hidden; |
|||
position:absolute; |
|||
right:-5px; |
|||
width:8px; |
|||
z-index:105; |
|||
} |
|||
#main #movebox #Bottomleft { |
|||
bottom:-5px; |
|||
cursor:ne-resize; |
|||
left:-5px |
|||
} |
|||
#main #movebox #Bottommiddle { |
|||
bottom:-5px; |
|||
cursor:n-resize; |
|||
left:50%; |
|||
margin-left:-5px |
|||
} |
|||
#main #movebox #Rightmiddle { |
|||
cursor:e-resize; |
|||
margin-top:-5px; |
|||
right:-5px; |
|||
top:50% |
|||
} |
|||
#main #movebox #TopRight { |
|||
cursor:ne-resize; |
|||
right:-5px; |
|||
top:-5px |
|||
} |
|||
#main #movebox #Topleft { |
|||
cursor:nw-resize; |
|||
left:-5px; |
|||
top:-5px |
|||
} |
|||
#main #movebox #Topmiddle { |
|||
cursor:n-resize; |
|||
left:50%; |
|||
margin-left:-5px; |
|||
top:-5px |
|||
} |
|||
#main #movebox #leftmiddle { |
|||
cursor:e-resize; |
|||
left:-5px; |
|||
margin-top:-5px; |
|||
top:50% |
|||
} |
|||
/*拉伸截框的八个点结束*/ |
|||
#main #relat { |
|||
position:relative; |
|||
z-index:60 |
|||
} |
|||
#main #smallbox { |
|||
background:url(); |
|||
overflow:hidden; |
|||
position:relative; |
|||
z-index:100 |
|||
} |
|||
/*主功能界面结束*/ |
|||
/*上滚下滚提示的CSS*/ |
|||
#main .point { |
|||
width:100%; |
|||
line-height:35px; |
|||
font-size:12px; |
|||
position:absolute; |
|||
z-index:200; |
|||
filter:alpha(opacity=70); |
|||
opacity:0.7; |
|||
} |
|||
.point i { |
|||
display:inline-block; |
|||
height:16px; |
|||
width:15px; |
|||
float:left; |
|||
margin:10px 10px 0 20px; |
|||
background:url(../images/bg_repno.png) no-repeat; |
|||
} |
|||
/*上滚下滚提示的CSS结束*/ |
|||
/*截图完成后的CSS开始*/ |
|||
#shearphoto_main .complete { |
|||
float:left; |
|||
overflow:hidden; |
|||
position:absolute; |
|||
width:100%; |
|||
z-index:250; |
|||
padding:10px 0 0 40px; |
|||
background:url(../images/bg.jpg) #CCC; |
|||
} |
|||
.complete .completeTxt { |
|||
-moz-border-radius:10px; |
|||
-moz-box-shadow:0 0 15px 0 #666; |
|||
border-radius:10px; |
|||
bottom:30px; |
|||
box-shadow:0 0 15px 0 #666; |
|||
position:absolute; |
|||
right:30px; |
|||
text-align:center; |
|||
width:280px; |
|||
padding:30px 0; |
|||
background:#FBFDFF; |
|||
} |
|||
.complete .completeTxt a { |
|||
color:#FFF; |
|||
display:block; |
|||
font-size:14px; |
|||
line-height:40px; |
|||
width:128px; |
|||
margin:0 auto; |
|||
background:url(../images/bg_index.gif) no-repeat 0 -2px; |
|||
} |
|||
.complete .completeTxt a:hover { |
|||
background-position: -137px -2px |
|||
} |
|||
.complete .completeTxt p { |
|||
color:#666; |
|||
font-size:12px; |
|||
font-weight:700; |
|||
margin:10px 0; |
|||
} |
|||
.complete .completeTxt strong { |
|||
font-size:14px |
|||
} |
|||
.complete img { |
|||
border:1px solid #CCC; |
|||
display:inline-block; |
|||
float:left; |
|||
margin:5px 5px; |
|||
padding:2px; |
|||
} |
|||
.complete .completeTxt strong i { |
|||
display:inline-block; |
|||
height:16px; |
|||
width:15px; |
|||
vertical-align:middle; |
|||
margin:-3px 5px 0 0; |
|||
background:url(../images/bg_repno.png) no-repeat; |
|||
} |
|||
/*截图完成后的CSS结束*/ |
|||
/*弹出相册开始*/ |
|||
#photoalbum { |
|||
-moz-border-radius:10px; |
|||
-moz-box-shadow:3px 3px 10px 0 #000; |
|||
border:8px solid #999; |
|||
border-radius:10px; |
|||
box-shadow:3px 3px 10px 0 #000; |
|||
display:none; |
|||
height:300px; |
|||
left:50%; |
|||
position:absolute; |
|||
top:59%; |
|||
width:465px; |
|||
z-index:210; |
|||
margin:-178px 0 0 -240.5px; |
|||
background:#DFEFFF; |
|||
} |
|||
#photoalbum h1 { |
|||
background:#999; |
|||
color:#FFF; |
|||
font-size:15px; |
|||
height:40px; |
|||
line-height:30px; |
|||
padding-left:10px; |
|||
width:455px |
|||
} |
|||
#photoalbum i { |
|||
background:url(../images/fancybox_sprite.png) no-repeat; |
|||
display:block; |
|||
float:left; |
|||
height:37px; |
|||
left:429px; |
|||
position:absolute; |
|||
top:0; |
|||
cursor:pointer; |
|||
width:36px |
|||
} |
|||
#photoalbum ul { |
|||
height:auto; |
|||
width:100% |
|||
} |
|||
#photoalbum ul li { |
|||
border:1px solid #CCC; |
|||
cursor:pointer; |
|||
display:inline; |
|||
float:left; |
|||
height:133px; |
|||
margin:5px; |
|||
padding:2px; |
|||
width:47%; |
|||
overflow: hidden; |
|||
} |
|||
#photoalbum ul li img { |
|||
width:100% |
|||
} |
|||
#photoalbum ul li:hover { |
|||
border:1px solid #09F |
|||
} |
|||
/*弹出相册结束*/ |
|||
/*弹出拍照开始*/ |
|||
#CamBox { |
|||
-moz-border-radius:10px; |
|||
border-radius:10px; |
|||
left:67%; |
|||
position:absolute; |
|||
-moz-box-shadow:5px 5px 10px 0 #3b3b3f; |
|||
box-shadow:5px 5px 10px 0 #3b3b3f; |
|||
width:350px; |
|||
z-index:250; |
|||
display:none; |
|||
top:95%; |
|||
margin:-285px 0 0 -276px; |
|||
background:url(../images/cam_bg.jpg) #d5d5d5; |
|||
} |
|||
#CamBox #CamFlash { |
|||
height:300px; |
|||
width:300px; |
|||
margin:0 auto; |
|||
background:#fff; |
|||
} |
|||
#CamBox #timing { |
|||
color:#F60; |
|||
display:none; |
|||
font-size:36px; |
|||
font-weight:700; |
|||
height:220px; |
|||
left:50%; |
|||
line-height:200px; |
|||
position:absolute; |
|||
text-align:center; |
|||
top:50%; |
|||
width:200px; |
|||
margin:-100px 0 0 -100px; |
|||
} |
|||
#CamBox .cambar { |
|||
height:60px; |
|||
padding-top:20px; |
|||
width:300px; |
|||
margin:0 auto; |
|||
} |
|||
#CamBox .cambar a { |
|||
background:url(../images/btn5.jpg) no-repeat; |
|||
float:left; |
|||
height:31px; |
|||
line-height:31px; |
|||
text-align:center; |
|||
width:79px |
|||
} |
|||
#CamBox .lens { |
|||
background:url(../images/cam.png) no-repeat 50%; |
|||
height:40px; |
|||
width:100% |
|||
} |
|||
#CamBox .cambar #camClose,#CamBox .cambar #setCam { |
|||
color: #333; |
|||
} |
|||
#CamBox .cambar #setCam { |
|||
margin-right: 30px; |
|||
} |
|||
#CamBox .cambar #camClose:hover,#CamBox .cambar #setCam:hover { |
|||
background-position: 0 -31px; |
|||
} |
|||
#CamBox .cambar #CamOk { |
|||
background-position: -79px 0; |
|||
color: #fff; |
|||
margin-right: 30px; |
|||
} |
|||
#CamBox .cambar #CamOk:hover { |
|||
background-position: -79px -31px; |
|||
} |
|||
/*弹出拍照结束*/ |
|||
/*图片特效*/ |
|||
#shearphoto_main .Effects { |
|||
color:#FFF; |
|||
overflow-x:hidden; |
|||
width:155px; |
|||
display:none; |
|||
float:left; |
|||
border-color:#CCC; |
|||
border-style:solid none; |
|||
border-width:1px; |
|||
background:url(../images/Effects/cardboard.png); |
|||
} |
|||
#shearphoto_main .Effects .EffectsStrong { |
|||
border-bottom:solid 1px #676767; |
|||
display:block; |
|||
font-size:14px; |
|||
height:30px; |
|||
line-height:30px; |
|||
text-align:center; |
|||
width:100% |
|||
} |
|||
#shearphoto_main .Effects a { |
|||
border-bottom:solid 1px #676767; |
|||
color:#FFF; |
|||
display:block; |
|||
vertical-align:middle; |
|||
text-shadow:#000 0 2px 0; |
|||
width:100%; |
|||
padding:5px 0 7px; |
|||
} |
|||
#shearphoto_main .Effects a:hover, #shearphoto_main .Effects .Aclick { |
|||
background-color: #A7A7A7; |
|||
} |
|||
#shearphoto_main .Effects a img { |
|||
-moz-border-radius:3px; |
|||
border-radius:3px; |
|||
display:inline-block; |
|||
height:42px; |
|||
vertical-align:middle; |
|||
-moz-box-shadow:0 0 5px 0 #000; |
|||
box-shadow:0 0 5px 0 #000; |
|||
width:70px; |
|||
margin:2px 7px 0; |
|||
} |
|||
::-webkit-scrollbar { |
|||
height:13px; |
|||
width:13px |
|||
} |
|||
::-webkit-scrollbar-thumb { |
|||
background:padding-box #c2c2c2; |
|||
border:1px solid #979797; |
|||
min-height:28px |
|||
} |
|||
::-webkit-scrollbar-thumb:hover { |
|||
background:#929292; |
|||
border:1px solid #636363 |
|||
} |
|||
::-webkit-scrollbar-track-piece { |
|||
background:#f5f5f5; |
|||
border-left:1px solid #d2d2d2 |
|||
} |
|||
/*图片特效结束*/ |
|||
/*底部开始*/ |
|||
.bottom { |
|||
width:1000px; |
|||
left:2px; |
|||
color:#666; |
|||
clear:both; |
|||
text-align:center; |
|||
margin:0 auto; |
|||
padding:0 0 10px 5px |
|||
} |
|||
.bottom span { |
|||
vertical-align:middle; |
|||
display:inline-block; |
|||
margin:0 5px 0 2px |
|||
} |
|||
.bottom a { |
|||
color: #666; |
|||
} |
|||
.header h1 a { |
|||
font-size: 14px; |
|||
color: #fff; |
|||
} |
|||
.bottom span img { |
|||
border-radius:30px; |
|||
-moz-border-radius:30px; |
|||
} |
|||
/*底部结束*/ |
|||
@ -0,0 +1,703 @@ |
|||
@charset "utf-8"; |
|||
/*公用开始*/ |
|||
img,div,i,em,a,body,p,H1,ul,li { |
|||
border-style:none; |
|||
list-style-type:none; |
|||
margin:0; |
|||
padding:0; |
|||
text-decoration:none |
|||
} |
|||
/*公用结束*/ |
|||
/*缓冲效果开始 2.3加入的*/ |
|||
#shearphoto_main { |
|||
visibility:hidden; |
|||
margin:0 auto; |
|||
} |
|||
#shearphoto_loading { |
|||
width:100px; |
|||
text-align:center; |
|||
line-height:130px; |
|||
color:#999; |
|||
margin:0 auto; |
|||
background:url(../images/loading.gif) no-repeat |
|||
} |
|||
/*缓冲效果结束*/ |
|||
/*头部部份开始*/ |
|||
.header { |
|||
height:65px; |
|||
margin-bottom:10px; |
|||
width:100%; |
|||
overflow:hidden; |
|||
background:url(../images/bg_headLine1.png) no-repeat 290px #505153; |
|||
} |
|||
.header A { |
|||
-moz-border-radius:5px; |
|||
border-radius:5px; |
|||
color:#FFF; |
|||
display:inline-block; |
|||
float:left; |
|||
font-size:15px; |
|||
font-weight:700; |
|||
line-height:50px; |
|||
text-align:center; |
|||
width:150px; |
|||
margin:7px 0 0 100px; |
|||
background:#3E8BFF; |
|||
} |
|||
.header A:hover { |
|||
text-decoration: underline; |
|||
background-color: #0F6FFF; |
|||
} |
|||
.header img { |
|||
display:inline-block; |
|||
float:left; |
|||
margin-left:20px |
|||
} |
|||
.header strong { |
|||
color:#FFF; |
|||
display:block; |
|||
float:right; |
|||
height:60px; |
|||
line-height:60px; |
|||
margin-right:20px |
|||
} |
|||
/*头部部份结束*/ |
|||
/*预览开始*/ |
|||
#shearphoto_main #preview { |
|||
float:left; |
|||
position: relative; |
|||
} |
|||
#shearphoto_main #preview a { |
|||
display:inline; |
|||
float:left; |
|||
-moz-border-radius:5px; |
|||
border-radius:5px; |
|||
-moz-box-shadow:1px 1px 3px 1px #999; |
|||
box-shadow:1px 1px 3px 1px #999; |
|||
overflow: hidden; |
|||
position: relative; |
|||
} |
|||
#shearphoto_main #preview a img { |
|||
position: relative; |
|||
} |
|||
/*预览结束*/ |
|||
.bottom a:hover { |
|||
color: #39F; |
|||
text-decoration: underline; |
|||
} |
|||
/*旋转开始*/ |
|||
#Shearbar #LeftRotate { |
|||
margin:0 10px; |
|||
} |
|||
#Shearbar #LeftRotate em,#Shearbar #RightRotate em { |
|||
display:inline-block; |
|||
height:21px; |
|||
vertical-align:middle; |
|||
width:15px; |
|||
margin:1px 3px 0 0; |
|||
background:url(../images/bch.jpg) no-repeat; |
|||
} |
|||
#Shearbar #LeftRotate,#Shearbar #RightRotate { |
|||
-moz-border-radius:5px; |
|||
border:1px solid #CCC; |
|||
border-radius:5px; |
|||
color:#666; |
|||
cursor:pointer; |
|||
float:left; |
|||
font-size:12px; |
|||
margin-top:-5px; |
|||
text-align:center; |
|||
width:50px; |
|||
} |
|||
#Shearbar #LeftRotate:hover,#Shearbar #RightRotate:hover { |
|||
border:1px solid #919191; |
|||
color:#414141 |
|||
} |
|||
#Shearbar #RightRotate { |
|||
margin-left:10px |
|||
} |
|||
#Shearbar #RightRotate em { |
|||
background-position:-91px 0; |
|||
margin:1px 0 0 3px; |
|||
} |
|||
#Shearbar .hint { |
|||
color:#333; |
|||
display:block; |
|||
float:left; |
|||
font-size:12px; |
|||
font-style:normal; |
|||
height:19px; |
|||
line-height:15px; |
|||
width:19px |
|||
} |
|||
#Shearbar .hint.L,#Shearbar .hint.R { |
|||
background:url(../images/zoom.png) no-repeat -2px -1px |
|||
} |
|||
#Shearbar .hint.R { |
|||
background-position: -43px -1px |
|||
} |
|||
/*旋转结束*/ |
|||
/*选择图片方式开始*/ |
|||
#shearphoto_main #SelectBox { |
|||
background:url(../images/bg.png); |
|||
position:absolute; |
|||
z-index:180 |
|||
} |
|||
#SelectBox #selectImage input { |
|||
height: 50px; |
|||
width: 224px; |
|||
background-color: #FFF; |
|||
filter:alpha(opacity=0); |
|||
opacity:0; |
|||
position: absolute; |
|||
float: left; |
|||
cursor: pointer; |
|||
display: block; |
|||
} |
|||
.displayNone { |
|||
display: none; |
|||
} |
|||
#SelectBox #selectImage,#SelectBox #PhotoLoading,#SelectBox #camerasImage { |
|||
-moz-border-radius:10px; |
|||
border-radius:10px; |
|||
-moz-box-shadow:2px 2px 7px 1px #3e4044; |
|||
box-shadow:2px 2px 7px 1px #3e4044; |
|||
display:block; |
|||
height:50px; |
|||
outline:0 none; |
|||
position:absolute; |
|||
width:223px; |
|||
overflow:hidden; |
|||
margin:-37px 0 0 -112px; |
|||
background:url(../images/Select_zh-cn.jpg) no-repeat; |
|||
} |
|||
#SelectBox #PhotoLoading { |
|||
background-position:0 -160px; |
|||
left:50%; |
|||
top:70% |
|||
} |
|||
#SelectBox #selectImage { |
|||
background-position:0 -15px; |
|||
left:50%; |
|||
top:35% |
|||
} |
|||
#SelectBox #camerasImage { |
|||
background-position:0 -85px; |
|||
left:50%; |
|||
top:79% |
|||
} |
|||
#SelectBox #selectImage:hover,#SelectBox #PhotoLoading:hover,#SelectBox #camerasImage:hover { |
|||
border:3px solid #666; |
|||
margin:-37px 0 0 -112px; |
|||
} |
|||
/*选择图片方式结束*/ |
|||
/*工具条开始*/ |
|||
#shearphoto_main #Shearbar { |
|||
padding-top:10px; |
|||
width:442px; |
|||
margin:0 auto; |
|||
} |
|||
#Shearbar .Psava { |
|||
clear:both; |
|||
height:40px; |
|||
padding:20px 0 0 65px |
|||
} |
|||
#Shearbar .Psava #againIMG ,#Shearbar .Psava #saveShear { |
|||
background:url(../images/btn5.jpg) no-repeat; |
|||
color:#666; |
|||
float:left; |
|||
line-height:31px; |
|||
margin-right:20px; |
|||
text-align:center; |
|||
width:79px; |
|||
height: 31px; |
|||
} |
|||
#Shearbar .Psava #againIMG:hover { |
|||
background-position: 0px -31px; |
|||
} |
|||
#Shearbar .Psava #saveShear { |
|||
background-position: -79px 0px; |
|||
color:#FFF; |
|||
} |
|||
#Shearbar .Psava #saveShear:hover { |
|||
background-position:-79px -31px |
|||
} |
|||
#Shearbar #ZoomDist { |
|||
float:left; |
|||
height:20px; |
|||
position:relative; |
|||
width:120px |
|||
} |
|||
#Shearbar #ZoomDist #ZoomBar { |
|||
background:url(../images/ZoomBar.gif) no-repeat; |
|||
filter:alpha(opacity=80); |
|||
opacity:0.8; |
|||
height:20px; |
|||
left:0; |
|||
position:absolute; |
|||
width:15px |
|||
} |
|||
#ZoomDist #Zoomcentre { |
|||
filter:alpha(opacity=100); |
|||
height:9px; |
|||
left:50%; |
|||
top:25px; |
|||
position:absolute; |
|||
width:10px; |
|||
margin-left:-4px; |
|||
background:url(../images/Zoomcentre.jpg) no-repeat |
|||
} |
|||
#ZoomDist .progress { |
|||
-moz-border-radius:15px; |
|||
border-radius:15px; |
|||
background:#999; |
|||
display:block; |
|||
float:left; |
|||
height:8px; |
|||
margin-top:4px; |
|||
overflow:hidden; |
|||
width:100% |
|||
} |
|||
/*工具条结束*/ |
|||
/*主功能界面开始*/ |
|||
#shearphoto_main #black { |
|||
position:absolute; |
|||
z-index:99 |
|||
} |
|||
#shearphoto_main .primary { |
|||
float: left; |
|||
} |
|||
#shearphoto_main #main { |
|||
-moz-user-select:none; |
|||
-ms-user-select:none; |
|||
-webkit-user-select:none; |
|||
background:url(../images/bg.png); |
|||
overflow:hidden; |
|||
position:relative; |
|||
z-index:50; |
|||
border: 1px solid #CCC; |
|||
float: left; |
|||
} |
|||
#main .BigImg { |
|||
float:left; |
|||
position:relative; |
|||
z-index:51 |
|||
} |
|||
.MoveImg { |
|||
position:relative; |
|||
z-index:98; |
|||
max-width:300%; |
|||
} |
|||
#preview_img{ |
|||
max-width:300%; |
|||
} |
|||
#main #imgID { |
|||
display:block; |
|||
z-index:51 |
|||
} |
|||
#main #movebox { |
|||
position:absolute; |
|||
z-index:100; |
|||
float: left; |
|||
} |
|||
/*动态边框开始*/ |
|||
#movebox #borderTop,#movebox #borderLeft,#movebox #borderRight,#movebox #borderBottom { |
|||
background:url(../images/border.gif) #FFF; |
|||
display:inline-block; |
|||
filter:alpha(opacity=50); |
|||
opacity:0.5; |
|||
overflow:hidden; |
|||
position:absolute; |
|||
z-index:104; |
|||
} |
|||
#movebox #borderTop { |
|||
height:1px; |
|||
left:0; |
|||
top:0; |
|||
width:100%; |
|||
} |
|||
#movebox #borderLeft { |
|||
height:100%; |
|||
left:0; |
|||
top:0; |
|||
width:1px; |
|||
} |
|||
#movebox #borderRight { |
|||
height:100%; |
|||
right:0; |
|||
top:0; |
|||
width:1px; |
|||
} |
|||
#movebox #borderBottom { |
|||
bottom:0; |
|||
height:1px; |
|||
left:0; |
|||
width:100%; |
|||
} |
|||
/*动态边框结束*/ |
|||
/*拉伸截框的八个点开始*/ |
|||
#main #movebox #BottomRight,#main #movebox #TopRight,#main #movebox #Topleft,#main #movebox #Bottomleft,#main #movebox #Topmiddle,#main #movebox #leftmiddle,#main #movebox #Rightmiddle,#main #movebox #Bottommiddle { |
|||
background:#000; |
|||
border:1px solid #FFF; |
|||
bottom:-5px; |
|||
cursor:nw-resize; |
|||
display:block; |
|||
filter:alpha(opacity=50); |
|||
height:8px; |
|||
opacity:0.5; |
|||
overflow:hidden; |
|||
position:absolute; |
|||
right:-5px; |
|||
width:8px; |
|||
z-index:105; |
|||
} |
|||
#main #movebox #Bottomleft { |
|||
bottom:-5px; |
|||
cursor:ne-resize; |
|||
left:-5px |
|||
} |
|||
#main #movebox #Bottommiddle { |
|||
bottom:-5px; |
|||
cursor:n-resize; |
|||
left:50%; |
|||
margin-left:-5px |
|||
} |
|||
#main #movebox #Rightmiddle { |
|||
cursor:e-resize; |
|||
margin-top:-5px; |
|||
right:-5px; |
|||
top:50% |
|||
} |
|||
#main #movebox #TopRight { |
|||
cursor:ne-resize; |
|||
right:-5px; |
|||
top:-5px |
|||
} |
|||
#main #movebox #Topleft { |
|||
cursor:nw-resize; |
|||
left:-5px; |
|||
top:-5px |
|||
} |
|||
#main #movebox #Topmiddle { |
|||
cursor:n-resize; |
|||
left:50%; |
|||
margin-left:-5px; |
|||
top:-5px |
|||
} |
|||
#main #movebox #leftmiddle { |
|||
cursor:e-resize; |
|||
left:-5px; |
|||
margin-top:-5px; |
|||
top:50% |
|||
} |
|||
/*拉伸截框的八个点结束*/ |
|||
#main #relat { |
|||
position:relative; |
|||
z-index:60 |
|||
} |
|||
#main #smallbox { |
|||
background:url(); |
|||
overflow:hidden; |
|||
position:relative; |
|||
z-index:100 |
|||
} |
|||
/*主功能界面结束*/ |
|||
/*上滚下滚提示的CSS*/ |
|||
#main .point { |
|||
width:100%; |
|||
line-height:35px; |
|||
font-size:12px; |
|||
position:absolute; |
|||
z-index:200; |
|||
filter:alpha(opacity=70); |
|||
opacity:0.7; |
|||
} |
|||
.point i { |
|||
display:inline-block; |
|||
height:16px; |
|||
width:15px; |
|||
float:left; |
|||
margin:10px 10px 0 20px; |
|||
background:url(../images/bg_repno.png) no-repeat; |
|||
} |
|||
/*上滚下滚提示的CSS结束*/ |
|||
/*截图完成后的CSS开始*/ |
|||
#shearphoto_main .complete { |
|||
float:left; |
|||
overflow:hidden; |
|||
position:absolute; |
|||
width:100%; |
|||
z-index:250; |
|||
padding:10px 0 0 40px; |
|||
background:url(../images/bg.jpg) #CCC; |
|||
} |
|||
.complete .completeTxt { |
|||
-moz-border-radius:10px; |
|||
-moz-box-shadow:0 0 15px 0 #666; |
|||
border-radius:10px; |
|||
bottom:30px; |
|||
box-shadow:0 0 15px 0 #666; |
|||
position:absolute; |
|||
right:30px; |
|||
text-align:center; |
|||
width:280px; |
|||
padding:30px 0; |
|||
background:#FBFDFF; |
|||
} |
|||
.complete .completeTxt a { |
|||
color:#FFF; |
|||
display:block; |
|||
font-size:14px; |
|||
line-height:40px; |
|||
width:128px; |
|||
margin:0 auto; |
|||
background:url(../images/bg_index.gif) no-repeat 0 -2px; |
|||
} |
|||
.complete .completeTxt a:hover { |
|||
background-position: -137px -2px |
|||
} |
|||
.complete .completeTxt p { |
|||
color:#666; |
|||
font-size:12px; |
|||
font-weight:700; |
|||
margin:10px 0; |
|||
} |
|||
.complete .completeTxt strong { |
|||
font-size:14px |
|||
} |
|||
.complete img { |
|||
border:1px solid #CCC; |
|||
display:inline-block; |
|||
float:left; |
|||
margin:5px 5px; |
|||
padding:2px; |
|||
} |
|||
.complete .completeTxt strong i { |
|||
display:inline-block; |
|||
height:16px; |
|||
width:15px; |
|||
vertical-align:middle; |
|||
margin:-3px 5px 0 0; |
|||
background:url(../images/bg_repno.png) no-repeat; |
|||
} |
|||
/*截图完成后的CSS结束*/ |
|||
/*弹出相册开始*/ |
|||
#photoalbum { |
|||
-moz-border-radius:10px; |
|||
-moz-box-shadow:3px 3px 10px 0 #000; |
|||
border:8px solid #999; |
|||
border-radius:10px; |
|||
box-shadow:3px 3px 10px 0 #000; |
|||
display:none; |
|||
height:300px; |
|||
left:50%; |
|||
position:absolute; |
|||
top:59%; |
|||
width:465px; |
|||
z-index:210; |
|||
margin:-178px 0 0 -240.5px; |
|||
background:#DFEFFF; |
|||
} |
|||
#photoalbum h1 { |
|||
background:#999; |
|||
color:#FFF; |
|||
font-size:15px; |
|||
height:40px; |
|||
line-height:30px; |
|||
padding-left:10px; |
|||
width:455px |
|||
} |
|||
#photoalbum i { |
|||
background:url(../images/fancybox_sprite.png) no-repeat; |
|||
display:block; |
|||
float:left; |
|||
height:37px; |
|||
left:429px; |
|||
position:absolute; |
|||
top:0; |
|||
cursor:pointer; |
|||
width:36px |
|||
} |
|||
#photoalbum ul { |
|||
height:auto; |
|||
width:100% |
|||
} |
|||
#photoalbum ul li { |
|||
border:1px solid #CCC; |
|||
cursor:pointer; |
|||
display:inline; |
|||
float:left; |
|||
height:133px; |
|||
margin:5px; |
|||
padding:2px; |
|||
width:47%; |
|||
overflow: hidden; |
|||
} |
|||
#photoalbum ul li img { |
|||
width:100% |
|||
} |
|||
#photoalbum ul li:hover { |
|||
border:1px solid #09F |
|||
} |
|||
/*弹出相册结束*/ |
|||
/*弹出拍照开始*/ |
|||
#CamBox { |
|||
-moz-border-radius:10px; |
|||
border-radius:10px; |
|||
left:67%; |
|||
position:absolute; |
|||
-moz-box-shadow:5px 5px 10px 0 #3b3b3f; |
|||
box-shadow:5px 5px 10px 0 #3b3b3f; |
|||
width:350px; |
|||
z-index:250; |
|||
display:none; |
|||
top:95%; |
|||
margin:-285px 0 0 -276px; |
|||
background:url(../images/cam_bg.jpg) #d5d5d5; |
|||
} |
|||
#CamBox #CamFlash { |
|||
height:300px; |
|||
width:300px; |
|||
margin:0 auto; |
|||
background:#fff; |
|||
} |
|||
#CamBox #timing { |
|||
color:#F60; |
|||
display:none; |
|||
font-size:36px; |
|||
font-weight:700; |
|||
height:220px; |
|||
left:50%; |
|||
line-height:200px; |
|||
position:absolute; |
|||
text-align:center; |
|||
top:50%; |
|||
width:200px; |
|||
margin:-100px 0 0 -100px; |
|||
} |
|||
#CamBox .cambar { |
|||
height:60px; |
|||
padding-top:20px; |
|||
width:300px; |
|||
margin:0 auto; |
|||
} |
|||
#CamBox .cambar a { |
|||
background:url(../images/btn5.jpg) no-repeat; |
|||
float:left; |
|||
height:31px; |
|||
line-height:31px; |
|||
text-align:center; |
|||
width:79px |
|||
} |
|||
#CamBox .lens { |
|||
background:url(../images/cam.png) no-repeat 50%; |
|||
height:40px; |
|||
width:100% |
|||
} |
|||
#CamBox .cambar #camClose,#CamBox .cambar #setCam { |
|||
color: #333; |
|||
} |
|||
#CamBox .cambar #setCam { |
|||
margin-right: 30px; |
|||
} |
|||
#CamBox .cambar #camClose:hover,#CamBox .cambar #setCam:hover { |
|||
background-position: 0 -31px; |
|||
} |
|||
#CamBox .cambar #CamOk { |
|||
background-position: -79px 0; |
|||
color: #fff; |
|||
margin-right: 30px; |
|||
} |
|||
#CamBox .cambar #CamOk:hover { |
|||
background-position: -79px -31px; |
|||
} |
|||
/*弹出拍照结束*/ |
|||
/*图片特效*/ |
|||
#shearphoto_main .Effects { |
|||
color:#FFF; |
|||
overflow-x:hidden; |
|||
width:155px; |
|||
display:none; |
|||
float:left; |
|||
border-color:#CCC; |
|||
border-style:solid none; |
|||
border-width:1px; |
|||
background:url(../images/Effects/cardboard.png); |
|||
} |
|||
#shearphoto_main .Effects .EffectsStrong { |
|||
border-bottom:solid 1px #676767; |
|||
display:block; |
|||
font-size:14px; |
|||
height:30px; |
|||
line-height:30px; |
|||
text-align:center; |
|||
width:100% |
|||
} |
|||
#shearphoto_main .Effects a { |
|||
border-bottom:solid 1px #676767; |
|||
color:#FFF; |
|||
display:block; |
|||
vertical-align:middle; |
|||
text-shadow:#000 0 2px 0; |
|||
width:100%; |
|||
padding:5px 0 7px; |
|||
} |
|||
#shearphoto_main .Effects a:hover, #shearphoto_main .Effects .Aclick { |
|||
background-color: #A7A7A7; |
|||
} |
|||
#shearphoto_main .Effects a img { |
|||
-moz-border-radius:3px; |
|||
border-radius:3px; |
|||
display:inline-block; |
|||
height:42px; |
|||
vertical-align:middle; |
|||
-moz-box-shadow:0 0 5px 0 #000; |
|||
box-shadow:0 0 5px 0 #000; |
|||
width:70px; |
|||
margin:2px 7px 0; |
|||
} |
|||
::-webkit-scrollbar { |
|||
height:13px; |
|||
width:13px |
|||
} |
|||
::-webkit-scrollbar-thumb { |
|||
background:padding-box #c2c2c2; |
|||
border:1px solid #979797; |
|||
min-height:28px |
|||
} |
|||
::-webkit-scrollbar-thumb:hover { |
|||
background:#929292; |
|||
border:1px solid #636363 |
|||
} |
|||
::-webkit-scrollbar-track-piece { |
|||
background:#f5f5f5; |
|||
border-left:1px solid #d2d2d2 |
|||
} |
|||
/*图片特效结束*/ |
|||
/*底部开始*/ |
|||
.bottom { |
|||
width:1000px; |
|||
left:2px; |
|||
color:#666; |
|||
clear:both; |
|||
text-align:center; |
|||
margin:0 auto; |
|||
padding:0 0 10px 5px |
|||
} |
|||
.bottom span { |
|||
vertical-align:middle; |
|||
display:inline-block; |
|||
margin:0 5px 0 2px |
|||
} |
|||
.bottom a { |
|||
color: #666; |
|||
} |
|||
.header h1 a { |
|||
font-size: 14px; |
|||
color: #fff; |
|||
} |
|||
.bottom span img { |
|||
border-radius:30px; |
|||
-moz-border-radius:30px; |
|||
} |
|||
/*底部结束*/ |
|||
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 59 KiB |
|
After Width: | Height: | Size: 61 KiB |
|
After Width: | Height: | Size: 47 KiB |
|
After Width: | Height: | Size: 8.1 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 462 B |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 329 B |
|
After Width: | Height: | Size: 4.8 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1,723 @@ |
|||
try{ |
|||
Array.prototype.del = function(a) { |
|||
a.sort(); |
|||
for (var b = this.concat([]), c = a.length - 1; c >= 0; c--) b = b.slice(0, a[c]).concat(b.slice(a[c] + 1)); |
|||
return b; |
|||
}, |
|||
|
|||
HTMLImageElement.prototype.loadOnce = function(a) { |
|||
var b = 0; |
|||
this.onload = function() { |
|||
b || a.call(this, null), b++; |
|||
}; |
|||
}, function(a) { |
|||
var b = { |
|||
lib:[], |
|||
init:function() { |
|||
this.require("config"); |
|||
}, |
|||
module:function(a, b) { |
|||
this.lib[a] = b.call(null, this); |
|||
}, |
|||
require:function(a) { |
|||
var b = this, c = document.createElement("script"); |
|||
document.body.appendChild(c), c.src = "./js/module/" + a + ".js", c.onload = c.onerror = function(a) { |
|||
b.handlerror(a); |
|||
}; |
|||
}, |
|||
handlerror:function() {}, |
|||
destroySelf:function(b) { |
|||
throw delete ShearPhoto[a], Error(b); |
|||
}, |
|||
reflect:function(a, b, c) { |
|||
return a = this.lib.config.getModuleName(a), this.lib[a].process(b, c); |
|||
}, |
|||
reflectEasy:function(a) { |
|||
return a = this.lib.config.getEasyFun(a), this.lib.easy.getFun(a); |
|||
}, |
|||
add:function(a, b, c, d, e, f, g, h) { |
|||
return this.lib.addLayer.add(a, b, c, d, e, f, g, h); |
|||
}, |
|||
applyMatrix:function() {} |
|||
}; |
|||
ShearPhoto[a] = function(b, c, d) { |
|||
if (!(this instanceof ShearPhoto[a])) return new ShearPhoto[a](b, c, d); |
|||
this.startTime = +new Date(); |
|||
var e = document.createElement("canvas"), f = e.getContext("2d") , imgWidth , imgHeight; |
|||
isNaN(b) ? (e.width = parseInt(b.width), e.height = parseInt(b.height), c = getComputedStyle(b), |
|||
imgWidth = parseInt(c.getPropertyValue("width")), imgHeight = parseInt(c.getPropertyValue("height")), |
|||
isNaN(imgWidth) ? f.drawImage(b, 0, 0) :f.drawImage(b, 0, 0, imgWidth, imgHeight)) :(e.width = b, |
|||
e.height = c, f.fillStyle = d || "#fff", f.fillRect(0, 0, b, c)), this.canvas = e, |
|||
this.context = f, this.imgData = f.getImageData(0, 0, e.width, e.height), this.name = a + "_" + Math.random(), |
|||
this.canvas.id = this.name, this.layers = [], b = document.createElement("canvas"), |
|||
b.width = e.width, b.height = e.height; |
|||
}, ShearPhoto[a].module = function(a, c) { |
|||
b.module(a, c); |
|||
}, ShearPhoto[a].dorsyMath = function() { |
|||
return b.lib.dorsyMath; |
|||
}, ShearPhoto[a].prototype = { |
|||
act:function(a) { |
|||
var c = [], c = Array.prototype.slice.call(arguments, 1); |
|||
return b.reflect(a, this.imgData, c), this; |
|||
}, |
|||
view:function(a, b, c, d, e) { |
|||
var f = this.clone(); |
|||
return f.type = 1, this.addLayer(f, "正常", 0, 0), f.act(a, b, c, d, e), this; |
|||
}, |
|||
excute:function() { |
|||
var a = this.layers, b = a.length; |
|||
a[b - 1] && 1 == a[b - 1][0].type && (this.imgData = a[b - 1][0].imgData, delete a[b - 1]); |
|||
}, |
|||
cancel:function() { |
|||
var a = this.layers, b = a.length; |
|||
a[b - 1] && 1 == a[b - 1][0].type && delete a[b - 1]; |
|||
}, |
|||
show:function(b, c) { |
|||
var d, e, f, g, h = new ShearPhoto[a](this.canvas.width, this.canvas.height); |
|||
for (h.add(this, "正常", 0, 0, c), this.tempPsLib = h, d = 0; d < this.layers.length; d++) e = this.layers[d], |
|||
f = e[0].layers, g = e[0], f[f.length - 1] && 1 == f[f.length - 1][0].type && (g = f[f.length - 1][0]), |
|||
h.add(g, e[1], e[2], e[3], c); |
|||
return this.context.clearRect(0, 0, this.canvas.width, this.canvas.height), this.context.putImageData(h.imgData, 0, 0), |
|||
b ? document.querySelector(b).appendChild(this.canvas) :document.body.appendChild(this.canvas), |
|||
this; |
|||
}, |
|||
replace:function(a) { |
|||
return a && (a.onload = function() {}, a.src = this.save()), this; |
|||
}, |
|||
add:function() { |
|||
var a, c, d, e, f, g = []; |
|||
for (d = 0; d < arguments.length; d++) if (d) switch (typeof arguments[d]) { |
|||
case "string": |
|||
/\d+%/.test(arguments[d]) ? c = arguments[d].replace("%", "") :/[RGB]+/.test(arguments[d]) ? f = arguments[d] :a = arguments[d]; |
|||
break; |
|||
|
|||
case "number": |
|||
g.push(arguments[d]); |
|||
break; |
|||
|
|||
case "boolean": |
|||
e = arguments[d]; |
|||
} |
|||
return d = g[0] || 0, g = g[1] || 0, this.imgData = b.add(this.imgData, arguments[0].imgData, a || "正常", c / 100 || 1, d, g, e || !1, f || "RGB"), |
|||
this; |
|||
}, |
|||
addLayer:function(a, b, c, d) { |
|||
return this.layers.push([ a, b, c, d ]), this; |
|||
}, |
|||
clone:function() { |
|||
var b = new ShearPhoto[a](this.canvas.width, this.canvas.height); |
|||
return b.context.putImageData(this.imgData, 0, 0), b.imgData = b.context.getImageData(0, 0, this.canvas.width, this.canvas.height), |
|||
b; |
|||
}, |
|||
swap:function(a, b) { |
|||
var c = this.layers[a]; |
|||
return this.layers[a] = this.layers[b], this.layers[b] = c, this; |
|||
}, |
|||
deleteLayers:function(a) { |
|||
this.layers = this.layers.del(a); |
|||
}, |
|||
save:function(b, c) { |
|||
var d, e, f, g, h; |
|||
if (!this.layers.length) return c ? (this.context.putImageData(this.imgData, 0, 0), |
|||
this.canvas.toDataURL(c, .9)) :(this.context.putImageData(this.imgData, 0, 0), this.canvas.toDataURL()); |
|||
for (d = new ShearPhoto[a](this.canvas.width, this.canvas.height), d.add(this, "正常", 0, 0, b), |
|||
this.tempPsLib = d, e = 0; e < this.layers.length; e++) f = this.layers[e], g = f[0].layers, |
|||
h = f[0], g[g.length - 1] && 1 == g[g.length - 1][0].type && (h = g[g.length - 1][0]), |
|||
d.add(h, f[1], f[2], f[3], b); |
|||
return this.context.clearRect(0, 0, this.canvas.width, this.canvas.height), this.context.putImageData(d.imgData, 0, 0), |
|||
c ? this.canvas.toDataURL(c, .9) :this.canvas.toDataURL(); |
|||
}, |
|||
drawRect:function() { |
|||
var a, b, c, d, e, f; |
|||
for ((a = document.getElementById("imgRect")) || (a = document.createElement("canvas"), |
|||
a.id = "imgRect", document.body.appendChild(a), a.width = parseInt(this.canvas.width), |
|||
a.height = parseInt(this.canvas.height)), b = a.getContext("2d"), b.clearRect(0, 0, a.width, a.height), |
|||
c = [], d = this.tempPsLib.imgData.data, e = 0, f = d.length; f > e; e++) c[d[e]] ? c[d[e]]++ :c[d[e]] = 1; |
|||
for (b.beginPath(), b.moveTo(0, a.height), e = d = 0; 255 > e; e++) c[e] > d && (d = c[e]); |
|||
for (e = 0; 255 > e; e++) f = c[e] || 0, f = a.height - .8 * (f / d) * a.height, |
|||
b.lineTo(e / 256 * a.width, f, 1, 1); |
|||
b.lineTo(a.width + 10, a.height), b.fill(); |
|||
}, |
|||
ps:function(a) { |
|||
var c; |
|||
return c = b.reflectEasy(a).call(this), this.logTime("组合效果" + a), c; |
|||
}, |
|||
logTime:function(a) { |
|||
console.log(a + ": " + (+new Date() - this.startTime) / 1e3 + "s"); |
|||
}, |
|||
ctx:function(a) { |
|||
var b = this.ctxContext; |
|||
return b.putImageData(this.imgData, 0, 0), a.call(b), this.imgData = b.getImageData(0, 0, this.canvas.width, this.canvas.height), |
|||
this; |
|||
} |
|||
}; |
|||
}("psLib"), function(a) { |
|||
ShearPhoto[a].module("ImageEnhance", function() { |
|||
return { |
|||
process:function(a) { |
|||
for (var b = a.data, c = 0, d = b.length; d > c; c += 4) ; |
|||
return a.data = b, a; |
|||
} |
|||
}; |
|||
}); |
|||
}("psLib"), function(a) { |
|||
ShearPhoto[a].module("addLayer", function() { |
|||
return { |
|||
add:function(a, b, c, d, e, f, g, h) { |
|||
var i, j, k, l, m, n, o, p; |
|||
for (g = a.data, i = b.data, e = e || 0, f = f || 0, d = d || 1, h = h || "RGB", |
|||
/[RGB]+/.test(h) || (h = "RGB"), k = h.replace("R", "0").replace("G", "1").replace("B", "2"), |
|||
h = a.width, l = i.length, b = b.width, k = [ -1 < k.indexOf("0"), -1 < k.indexOf("1"), -1 < k.indexOf("2") ], |
|||
o = 0, p = g.length; p > o; o += 4) if (m = o / 4, n = parseInt(m / h), m %= h, |
|||
n -= f, m -= e, n = n * b + m, n *= 4, n >= 0 && l - 4 > n && b > m && m >= 0) for (m = 0; 3 > m && 0 != i[n + 3]; m++) switch (g[o + 3] = i[n + 3], |
|||
c) { |
|||
case "颜色减淡": |
|||
k[m] && (j = g[o + m] + g[o + m] * i[n + m] / (255 - i[n + m]), g[o + m] = (1 - d) * g[o + m] + d * j); |
|||
break; |
|||
|
|||
case "变暗": |
|||
k[m] && (j = g[o + m] < i[n + m] ? g[o + m] :i[n + m], g[o + m] = (1 - d) * g[o + m] + d * j); |
|||
break; |
|||
|
|||
case "变亮": |
|||
k[m] && (j = g[o + m] > i[n + m] ? g[o + m] :i[n + m], g[o + m] = (1 - d) * g[o + m] + d * j); |
|||
break; |
|||
|
|||
case "正片叠底": |
|||
k[m] && (j = parseInt(g[o + m] * i[n + m] / 255), g[o + m] = (1 - d) * g[o + m] + d * j); |
|||
break; |
|||
|
|||
case "滤色": |
|||
k[m] && (j = parseInt(255 - (255 - g[o + m]) * (255 - i[n + m]) / 255), g[o + m] = (1 - d) * g[o + m] + d * j); |
|||
break; |
|||
|
|||
case "叠加": |
|||
k[m] && (j = 127.5 >= g[o + m] ? g[o + m] * i[n + m] / 127.5 :255 - (255 - g[o + m]) * (255 - i[n + m]) / 127.5, |
|||
g[o + m] = (1 - d) * g[o + m] + d * j); |
|||
break; |
|||
|
|||
case "强光": |
|||
k[m] && (j = 127.5 >= i[n + m] ? g[o + m] * i[n + m] / 127.5 :g[o + m] + (255 - g[o + m]) * (i[n + m] - 127.5) / 127.5, |
|||
g[o + m] = (1 - d) * g[o + m] + d * j); |
|||
break; |
|||
|
|||
case "差值": |
|||
k[m] && (j = g[o + m] > i[n + m] ? g[o + m] - i[n + m] :i[n + m] - g[o + m], g[o + m] = (1 - d) * g[o + m] + d * j); |
|||
break; |
|||
|
|||
case "排除": |
|||
k[m] && (j = g[o + m] + i[n + m] - g[o + m] * i[n + m] / 127.5, g[o + m] = (1 - d) * g[o + m] + d * j); |
|||
break; |
|||
|
|||
case "点光": |
|||
k[m] && (j = g[o + m] < 2 * i[n + m] - 255 ? 2 * i[n + m] - 255 :g[o + m] < 2 * i[n + m] ? g[o + m] :2 * i[n + m], |
|||
g[o + m] = (1 - d) * g[o + m] + d * j); |
|||
break; |
|||
|
|||
case "颜色加深": |
|||
k[m] && (j = 255 - 255 * (255 - g[o + m]) / i[n + m], g[o + m] = (1 - d) * g[o + m] + d * j); |
|||
break; |
|||
|
|||
case "线性加深": |
|||
k[m] && (j = g[o + m] + i[n + m], j = j > 255 ? j - 255 :0, g[o + m] = (1 - d) * g[o + m] + d * j); |
|||
break; |
|||
|
|||
case "线性减淡": |
|||
k[m] && (j = g[o + m] + i[n + m], j = j > 255 ? 255 :j, g[o + m] = (1 - d) * g[o + m] + d * j); |
|||
break; |
|||
|
|||
case "柔光": |
|||
k[m] && (j = 127.5 > i[n + m] ? ((2 * i[n + m] - 255) * (255 - g[o + m]) / 65025 + 1) * g[o + m] :(2 * i[n + m] - 255) * (Math.sqrt(g[o + m] / 255) - g[o + m] / 255) + g[o + m], |
|||
g[o + m] = (1 - d) * g[o + m] + d * j); |
|||
break; |
|||
|
|||
case "亮光": |
|||
k[m] && (j = 127.5 > i[n + m] ? 255 * (1 - (255 - g[o + m]) / (2 * i[n + m])) :g[o + m] / (2 * (1 - i[n + m] / 255)), |
|||
g[o + m] = (1 - d) * g[o + m] + d * j); |
|||
break; |
|||
|
|||
case "线性光": |
|||
k[m] && (j = g[o + m] + 2 * i[n + m] - 255, j = j > 255 ? 255 :j, g[o + m] = (1 - d) * g[o + m] + d * j); |
|||
break; |
|||
|
|||
case "实色混合": |
|||
k[m] && (j = i[n + m] < 255 - g[o + m] ? 0 :255, g[o + m] = (1 - d) * g[o + m] + d * j); |
|||
break; |
|||
|
|||
default: |
|||
k[m] && (j = i[n + m], g[o + m] = (1 - d) * g[o + m] + d * j); |
|||
} |
|||
return a; |
|||
} |
|||
}; |
|||
}); |
|||
}("psLib"), function(a) { |
|||
ShearPhoto[a].module("brightness", function() { |
|||
return { |
|||
process:function(a, b) { |
|||
var c, d, e, f, g, h; |
|||
for (c = a.data, d = b[0] / 50, e = Math.tan((45 + 44 * ((b[1] || 0) / 50)) * Math.PI / 180), |
|||
f = 0, g = c.length; g > f; f += 4) for (h = 0; 3 > h; h++) c[f + h] = (c[f + h] - 127.5 * (1 - d)) * e + 127.5 * (1 + d); |
|||
return a; |
|||
} |
|||
}; |
|||
}); |
|||
}("psLib"), function(a) { |
|||
ShearPhoto[a].module("applyMatrix", function(a) { |
|||
return { |
|||
process:function(b) { |
|||
var c, d, e, f, g, h, i, j, k, l, m, n, o, p; |
|||
for (c = b.data, d = b.width, e = new a.lib.dorsyMath.Matrix([ -2, -4, -4, -4, -2, -4, 0, 8, 0, -4, -4, 8, 24, 8, -4, -4, 0, 8, 0, -4, -2, -4, -4, -4, -2 ], 25, 1), |
|||
f = [], g = 0, h = c.length; h > g; g += 4) if (i = g / 4, j = parseInt(i / d), |
|||
k = i % d, 0 != j && 0 != k) { |
|||
for (l = [ [], [], [] ], m = -2; 3 > m; m++) for (n = j + m, o = -2; 3 > o; o++) for (p = 4 * (n * d + (k + o)), |
|||
i = 0; 3 > i; i++) l[i].push(c[p + i]); |
|||
for (j = new a.lib.dorsyMath.Matrix(l, 3, matrixSize).mutiply(e), i = 0; 3 > i; i++) f[g + i] = j.data[i]; |
|||
f[g + 4] = c[g + 4]; |
|||
} |
|||
for (g = 0, h = c.length; h > g; g++) c[g] = f[g] || c[g]; |
|||
return b; |
|||
} |
|||
}; |
|||
}); |
|||
}("psLib"), function(a) { |
|||
ShearPhoto[a].module("config", function() { |
|||
var a = { |
|||
"灰度处理":"toGray", |
|||
"反色":"toReverse", |
|||
"灰度阈值":"toThresh", |
|||
"高斯模糊":"gaussBlur", |
|||
"亮度":"brightness", |
|||
"浮雕效果":"embossment", |
|||
"查找边缘":"borderline", |
|||
"色相/饱和度调节":"setHSI", |
|||
"马赛克":"mosaic", |
|||
"油画":"oilPainting", |
|||
"腐蚀":"corrode", |
|||
"锐化":"sharp", |
|||
"添加杂色":"noise", |
|||
"曲线":"curve", |
|||
"暗角":"darkCorner", |
|||
"喷点":"dotted" |
|||
}, b = { |
|||
"美肤":"softenFace", |
|||
"素描":"sketch", |
|||
"自然增强":"softEnhancement", |
|||
"紫调":"purpleStyle", |
|||
"柔焦":"soften", |
|||
"复古":"vintage", |
|||
"黑白":"gray", |
|||
"仿lomo":"lomo", |
|||
"亮白增强":"strongEnhancement", |
|||
"灰白":"strongGray", |
|||
"灰色":"lightGray", |
|||
"暖秋":"warmAutumn", |
|||
"木雕":"carveStyle", |
|||
"粗糙":"rough" |
|||
}; |
|||
return { |
|||
getModuleName:function(b) { |
|||
return a[b] || b; |
|||
}, |
|||
getEasyFun:function(a) { |
|||
return b[a] || a; |
|||
} |
|||
}; |
|||
}); |
|||
}("psLib"), function(a) { |
|||
ShearPhoto[a].module("corrode", function() { |
|||
return { |
|||
process:function(a, b) { |
|||
var c, d, e, f, g, h, i, j, k; |
|||
for (c = parseInt(b[0]) || 3, d = a.data, e = a.width, f = a.height, g = 0; e > g; g++) for (h = 0; f > h; h++) for (i = parseInt(2 * Math.random() * c) - c, |
|||
j = parseInt(2 * Math.random() * c) - c, k = h * e + g, i = (h + i) * e + g + j, |
|||
j = 0; 3 > j; j++) d[4 * k + j] = d[4 * i + j]; |
|||
return a; |
|||
} |
|||
}; |
|||
}); |
|||
}("psLib"), function(a) { |
|||
ShearPhoto[a].module("curve", function(a) { |
|||
return { |
|||
process:function(b, c) { |
|||
var d, e, f, g, h, i, j, k; |
|||
for (d = a.lib.dorsyMath.lagrange(c[0], c[1]), e = b.data, f = b.width, g = b.height, |
|||
h = 0; f > h; h++) for (i = 0; g > i; i++) for (j = i * f + h, k = 0; 3 > k; k++) e[4 * j + k] = d(e[4 * j + k]); |
|||
return b; |
|||
} |
|||
}; |
|||
}); |
|||
}("psLib"), function(a) { |
|||
ShearPhoto[a].module("darkCorner", function(a) { |
|||
return { |
|||
process:function(b, c) { |
|||
var d, e, f, g, h, i, j, k, l, m, n, o, p, q; |
|||
for (d = parseInt(c[0]) || 3, e = c[1] || 30, f = b.data, g = b.width, h = b.height, |
|||
i = 2 * g / 3, j = 1 * h / 2, k = a.lib.dorsyMath.distance([ i, j ]), d = k * (1 - d / 10), |
|||
l = 0; g > l; l++) for (m = 0; h > m; m++) for (n = m * g + l, o = 0; 3 > o; o++) p = f[4 * n + o], |
|||
q = (a.lib.dorsyMath.distance([ l, m ], [ i, j ]) - d) / (k - d), 0 > q && (q = 0), |
|||
p = (0 * Math.pow(1 - q, 3) + .06 * q * Math.pow(1 - q, 2) + 3 * .3 * q * q * (1 - q) + 1 * Math.pow(q, 3)) * p * e / 255, |
|||
f[4 * n + o] -= p; |
|||
return b; |
|||
} |
|||
}; |
|||
}); |
|||
}("psLib"), function(a) { |
|||
ShearPhoto[a].module("dorsyMath", function(a) { |
|||
var b = { |
|||
FFT1:function(a) { |
|||
function c() { |
|||
var g, h, i, j, k, l, m, n, o, p, q; |
|||
for (e++, g = d / Math.pow(2, e), h = d / g, i = 0; g > i; i++) for (j = i * h, |
|||
k = (i + 1) * h - 1, l = e, m = Math.pow(2, l - 1), n = 0; k - m >= j; j++) o = j + m, |
|||
p = n * d / Math.pow(2, l), q = p + d / 4, a[j] instanceof b.C || (a[j] = new b.C(a[j])), |
|||
a[o] instanceof b.C || (a[o] = new b.C(a[o])), p = a[j].plus(a[o].mutiply(f[p])), |
|||
q = a[j].plus(a[o].mutiply(f[q])), a[j] = p, a[o] = q, n++; |
|||
g > 1 && c(); |
|||
} |
|||
for (var d = a.length, e = 0, f = [], g = 0; d > g; g++) f[g] = this.exp(-2 * Math.PI * g / d); |
|||
return c(), a; |
|||
}, |
|||
DFT:function() {}, |
|||
Matrix:function(a, b, c) { |
|||
var d, e, f = []; |
|||
if (b) { |
|||
if (isNaN(b) ? (d = /(\d+)\*/.exec(b)[1], b = /\*(\d+)/.exec(b)[1]) :(d = b, b = c), |
|||
a[0] && a[0][0]) for (c = 0; d > c; c++) for (f[c] = [], e = 0; b > e; e++) f[c][e] = a[c][e] || 0; else for (c = 0; d > c; c++) for (f[c] = [], |
|||
e = 0; b > e; e++) f[c][e] = a[c * b + e] || 0; |
|||
this.m = d, this.n = b; |
|||
} else this.m = a.length, this.n = a[0].length; |
|||
this.data = f; |
|||
}, |
|||
C:function(a, b) { |
|||
this.r = a || 0, this.i = b || 0; |
|||
}, |
|||
exp:function(a, c) { |
|||
a = a || 0, c = c || 1; |
|||
var d = new b.C(); |
|||
return d.r = c * Math.cos(a), d.i = c * Math.sin(a), d; |
|||
}, |
|||
lagrange:function(a, b) { |
|||
var c = a.length; |
|||
return function(d) { |
|||
var e, f, g, h, i; |
|||
for (e = 0, f = 0; c > f; f++) { |
|||
for (g = 1, h = 1, i = 0; c > i; i++) i != f && (g *= a[f] - a[i], h *= d - a[i]); |
|||
e += b[f] * (h / g); |
|||
} |
|||
return e; |
|||
}; |
|||
}, |
|||
applyMatrix:function(c, d, e) { |
|||
var f, g, h, i, j, k, l, m, n, o, p, q, r, s, t; |
|||
for (e = e || 0, f = c.data, g = c.width, h = d.length, d = new b.Matrix(d, h, 1), |
|||
i = [], j = -(Math.sqrt(h) - 1) / 2, k = 0, l = f.length; l > k; k += 4) if (m = k / 4, |
|||
n = parseInt(m / g), o = m % g, 0 != n && 0 != o) { |
|||
for (p = [ [], [], [] ], q = j; -j >= q; q++) for (r = n + q, s = j; -j >= s; s++) for (t = 4 * (r * g + (o + s)), |
|||
m = 0; 3 > m; m++) p[m].push(f[t + m]); |
|||
for (n = new a.lib.dorsyMath.Matrix(p, 3, h).mutiply(d), m = 0; 3 > m; m++) i[k + m] = n.data[m]; |
|||
i[k + 4] = f[k + 4]; |
|||
} |
|||
for (k = 0, l = f.length; l > k; k++) i[k] && (f[k] = i[k] < e ? i[k] :f[k]); |
|||
return c; |
|||
}, |
|||
RGBToHSI:function(a, b, c) { |
|||
var d = (a - b + a - c) / 2 / Math.sqrt((a - b) * (a - b) + (a - c) * (b - c)) || 0, d = Math.acos(d), d = c > b ? 2 * Math.PI - d :d, e = 1 - 3 * Math.min(a, b, c) / (a + b + c); |
|||
return d > 2 * Math.PI && (d = 2 * Math.PI), 0 > d && (d = 0), { |
|||
H:d, |
|||
S:e, |
|||
I:(a + b + c) / 3 |
|||
}; |
|||
}, |
|||
HSIToRGB:function(a, b, c) { |
|||
if (0 > a ? (a %= 2 * Math.PI, a += 2 * Math.PI) :a %= 2 * Math.PI, a <= 2 * Math.PI / 3) var d = c * (1 - b), e = c * (1 + b * Math.cos(a) / Math.cos(Math.PI / 3 - a)), f = 3 * c - (e + d); else a <= 4 * Math.PI / 3 ? (a -= 2 * Math.PI / 3, |
|||
e = c * (1 - b), f = c * (1 + b * Math.cos(a) / Math.cos(Math.PI / 3 - a)), d = 3 * c - (f + e)) :(a -= 4 * Math.PI / 3, |
|||
f = c * (1 - b), d = c * (1 + b * Math.cos(a) / Math.cos(Math.PI / 3 - a)), e = 3 * c - (f + d)); |
|||
return { |
|||
R:e, |
|||
G:f, |
|||
B:d |
|||
}; |
|||
}, |
|||
applyInHSI:function(a, b) { |
|||
var c, d, e, f; |
|||
for (c = a.data, d = 0, e = c.length; e > d; d += 4) f = this.RGBToHSI(c[d], c[d + 1], c[d + 2]), |
|||
b(f), 1 < f.S && (f.S = 1), 0 > f.S && (f.S = 0), f = this.HSIToRGB(f.H, f.S, f.I), |
|||
c[d] = f.R, c[d + 1] = f.G, c[d + 2] = f.B; |
|||
}, |
|||
applyInCoordinate:function() {}, |
|||
distance:function(a, c) { |
|||
return c = c || [ 0, 0 ], a = new b.C(a[0], a[1]), c = new b.C(c[0], c[1]), a.minus(c).distance(); |
|||
}, |
|||
xyToIFun:function(a) { |
|||
return function(b, c, d) { |
|||
return 4 * (c * a + b) + (d || 0); |
|||
}; |
|||
}, |
|||
xyCal:function(a, b, c, d, e) { |
|||
var f, g, h; |
|||
for (f = this.xyToIFun(a.width), g = 0; 3 > g; g++) h = f(b, c, g), a[h] = d(a[h]); |
|||
e && (a[h + 1] = e(a[h + 1])); |
|||
} |
|||
}; |
|||
return b.Matrix.prototype = { |
|||
plus:function(a) { |
|||
var c, d, e; |
|||
if (this.m != a.m || this.n != a.n) throw Error("矩阵加法行列不匹配"); |
|||
for (c = new b.Matrix([], this.m, this.n), d = 0; d < this.m; d++) for (e = 0; e < this.n; e++) c.data[d][e] = this.data[d][e] + a.data[d][e]; |
|||
return c; |
|||
}, |
|||
minus:function(a) { |
|||
var c, d, e; |
|||
if (this.m != a.m || this.n != a.n) throw Error("矩阵减法法行列不匹配"); |
|||
for (c = new b.Matrix([], this.m, this.n), d = 0; d < this.m; d++) for (e = 0; e < this.n; e++) c.data[d][e] = this.data[d][e] - a.data[d][e]; |
|||
return c; |
|||
}, |
|||
mutiply:function(a) { |
|||
var c, d, e, f, g; |
|||
if (this.n != a.m) throw Error("矩阵乘法行列不匹配"); |
|||
for (c = new b.Matrix([], this.m, a.n), d = 0; d < this.m; d++) for (e = 0; e < a.n; e++) { |
|||
for (f = 0, g = 0; g < this.n; g++) f += this.data[d][g] * a.data[g][e]; |
|||
c.data[d][e] = f; |
|||
} |
|||
return c; |
|||
} |
|||
}, b.C.prototype = { |
|||
plus:function(a) { |
|||
var c = new b.C(); |
|||
return c.r = this.r + a.r, c.i = this.i + a.i, c; |
|||
}, |
|||
minus:function(a) { |
|||
var c = new b.C(); |
|||
return c.r = this.r - a.r, c.i = this.i - a.i, c; |
|||
}, |
|||
mutiply:function(a) { |
|||
var c = new b.C(); |
|||
return c.r = this.r * a.r - this.i * a.i, c.i = this.r * a.i + this.i * a.r, c; |
|||
}, |
|||
divide:function(a) { |
|||
var c = new b.C(), d = a.mutiply(a.conjugated()); |
|||
return a = this.mutiply(a.conjugated()), c.r = a.r / d.r, c.i = a.i / d.r, c; |
|||
}, |
|||
conjugated:function() { |
|||
return new b.C(this.r, -this.i); |
|||
}, |
|||
distance:function() { |
|||
return Math.sqrt(this.r * this.r + this.i * this.i); |
|||
} |
|||
}, b; |
|||
}); |
|||
}("psLib"), function(a) { |
|||
ShearPhoto[a].module("dotted", function(a) { |
|||
return { |
|||
process:function(b, c) { |
|||
var d, e, f, g, h, i, j, k, l, m, n, o, p, q; |
|||
for (d = parseInt(c[0]) || 1, e = parseInt(c[1]) || 1, f = b.data, g = b.width, |
|||
h = b.height, i = 2 * d + 1, j = [], k = e * e, e = -d; d > e; e++) for (l = -d; d > l; l++) e * e + l * l > k && j.push([ e, l ]); |
|||
for (d = a.lib.dorsyMath.xyToIFun(g), e = 0, g = parseInt(g / i); g > e; e++) for (l = 0, |
|||
k = parseInt(h / i); k > l; l++) for (m = parseInt((e + .5) * i), n = parseInt((l + .5) * i), |
|||
o = 0; o < j.length; o++) p = m + j[o][0], q = n + j[o][1], f[d(p, q, 3)] = 225, |
|||
f[d(p, q, 2)] = 225, f[d(p, q, 0)] = 225, f[d(p, q, 1)] = 225; |
|||
return b; |
|||
} |
|||
}; |
|||
}); |
|||
}("psLib"), function(a) { |
|||
ShearPhoto[a].module("easy", function() { |
|||
return { |
|||
getFun:function(b) { |
|||
return { |
|||
softenFace:function() { |
|||
return this.clone().add(this.act("高斯模糊", 10), "滤色").act("亮度", -10, 5); |
|||
}, |
|||
sketch:function() { |
|||
var a = this.act("灰度处理").clone(); |
|||
return this.add(a.act("反色").act("高斯模糊", 8), "颜色减淡").act("锐化", 1); |
|||
}, |
|||
softEnhancement:function() { |
|||
return this.act("曲线", [ 0, 190, 255 ], [ 0, 229, 255 ]); |
|||
}, |
|||
purpleStyle:function() { |
|||
var a = this.clone(); |
|||
return this.add(a.act("高斯模糊", 3), "正片叠底", "RG"); |
|||
}, |
|||
soften:function() { |
|||
var a = this.clone(); |
|||
return this.add(a.act("高斯模糊", 6), "变暗"); |
|||
}, |
|||
vintage:function() { |
|||
return this.clone(), this.act("灰度处理").add(ShearPhoto[a](this.canvas.width, this.canvas.height, "#808080").act("添加杂色").act("高斯模糊", 4).act("色相/饱和度调节", 32, 19, 0, !0), "叠加"); |
|||
}, |
|||
gray:function() { |
|||
return this.act("灰度处理"); |
|||
}, |
|||
lomo:function() { |
|||
return this.clone().add(this.clone(), "滤色").add(this.clone(), "柔光").add(this.clone().act("反色"), "正常", "20%", "B").act("暗角", 6, 200); |
|||
}, |
|||
strongEnhancement:function() { |
|||
return this.clone().add(this.clone().act("曲线", [ 0, 50, 255 ], [ 0, 234, 255 ]), "柔光"); |
|||
}, |
|||
strongGray:function() { |
|||
return this.act("灰度处理").act("曲线", [ 0, 61, 69, 212, 255 ], [ 0, 111, 176, 237, 255 ]); |
|||
}, |
|||
lightGray:function() { |
|||
return this.act("灰度处理").act("曲线", [ 0, 60, 142, 194, 255 ], [ 0, 194, 240, 247, 255 ]); |
|||
}, |
|||
warmAutumn:function() { |
|||
var a = this.clone().act("色相/饱和度调节", 36, 47, 8, !0).act("暗角", 6, 150); |
|||
return this.add(a, "叠加"); |
|||
}, |
|||
carveStyle:function() { |
|||
var a = this.clone().act("马赛克").act("查找边缘").act("浮雕效果"); |
|||
return this.add(a, "线性光"); |
|||
}, |
|||
rough:function() { |
|||
return this.add(ShearPhoto[a](this.canvas.width, this.canvas.height, "#000").act("喷点").act("反色").act("浮雕效果"), "叠加"); |
|||
} |
|||
}[b]; |
|||
} |
|||
}; |
|||
}); |
|||
}("psLib"), function(a) { |
|||
ShearPhoto[a].module("embossment", function() { |
|||
return { |
|||
process:function(a) { |
|||
var b, c, d, e, f, g, h, i, j; |
|||
for (b = a.data, c = a.width, d = [], e = 0, f = b.length; f > e; e += 4) if (g = e / 4, |
|||
h = parseInt(g / c), i = g % c, g = 4 * ((h - 1) * c + (i - 1)), j = 4 * (h + 1) * c + 4 * (i + 1), |
|||
0 != h && 0 != i) { |
|||
for (h = 0; 3 > h; h++) d[e + h] = b[g + h] - b[j + h] + 127.5; |
|||
d[e + 4] = b[e + 4]; |
|||
} |
|||
for (e = 0, f = b.length; f > e; e++) b[e] = d[e] || b[e]; |
|||
return a; |
|||
} |
|||
}; |
|||
}); |
|||
}("psLib"), function(a) { |
|||
ShearPhoto[a].module("gaussBlur", function() { |
|||
return { |
|||
process:function(a, b, c) { |
|||
var d, e, f, g, h, i, j = a.data, k = a.width, l = a.height, m = [], n = 0; |
|||
for (b = Math.floor(b) || 3, c = c || b / 3, d = 1 / (Math.sqrt(2 * Math.PI) * c), |
|||
g = -1 / (2 * c * c), h = 0, c = -b; b >= c; c++, h++) f = d * Math.exp(g * c * c), |
|||
m[h] = f, n += f; |
|||
for (h = 0, c = m.length; c > h; h++) m[h] /= n; |
|||
for (d = 0; l > d; d++) for (c = 0; k > c; c++) { |
|||
for (n = e = f = g = 0, i = -b; b >= i; i++) h = c + i, h >= 0 && k > h && (h = 4 * (d * k + h), |
|||
e += j[h] * m[i + b], f += j[h + 1] * m[i + b], g += j[h + 2] * m[i + b], n += m[i + b]); |
|||
h = 4 * (d * k + c), j[h] = e / n, j[h + 1] = f / n, j[h + 2] = g / n; |
|||
} |
|||
for (c = 0; k > c; c++) for (d = 0; l > d; d++) { |
|||
for (n = e = f = g = 0, i = -b; b >= i; i++) h = d + i, h >= 0 && l > h && (h = 4 * (h * k + c), |
|||
e += j[h] * m[i + b], f += j[h + 1] * m[i + b], g += j[h + 2] * m[i + b], n += m[i + b]); |
|||
h = 4 * (d * k + c), j[h] = e / n, j[h + 1] = f / n, j[h + 2] = g / n; |
|||
} |
|||
return a.data = j, a; |
|||
} |
|||
}; |
|||
}); |
|||
}("psLib"), function(a) { |
|||
ShearPhoto[a].module("borderline", function(a) { |
|||
return { |
|||
process:function(b) { |
|||
return a.lib.dorsyMath.applyMatrix(b, [ 0, 1, 0, 1, -4, 1, 0, 1, 0 ], 250); |
|||
} |
|||
}; |
|||
}); |
|||
}("psLib"), function(a) { |
|||
ShearPhoto[a].module("mosaic", function() { |
|||
return { |
|||
process:function(a, b) { |
|||
var c, d, e, f, g, h, i, j, k, l, m, n, o; |
|||
for (c = parseInt(b[0]) || 3, d = a.data, e = a.width, f = a.height, c = 2 * c + 1, |
|||
g = 0, h = parseInt(e / c); h > g; g++) for (i = 0, j = parseInt(f / c); j > i; i++) { |
|||
for (k = [], l = [ 0, 0, 0 ], m = 0; c > m; m++) for (n = 0; c > n; n++) o = (i * c + m) * e + g * c + n, |
|||
l[0] += d[4 * o], l[1] += d[4 * o + 1], l[2] += d[4 * o + 2]; |
|||
for (k[0] = l[0] / (c * c), k[1] = l[1] / (c * c), k[2] = l[2] / (c * c), m = 0; c > m; m++) for (n = 0; c > n; n++) o = (i * c + m) * e + g * c + n, |
|||
d[4 * o] = k[0], d[4 * o + 1] = k[1], d[4 * o + 2] = k[2]; |
|||
} |
|||
return a; |
|||
} |
|||
}; |
|||
}); |
|||
}("psLib"), function(a) { |
|||
ShearPhoto[a].module("noise", function() { |
|||
return { |
|||
process:function(a, b) { |
|||
var c, d, e, f, g, h, i, j, k; |
|||
for (c = parseInt(b[0]) || 100, d = a.data, e = a.width, f = a.height, g = 0; e > g; g++) for (h = 0; f > h; h++) for (i = h * e + g, |
|||
j = 0; 3 > j; j++) k = parseInt(2 * Math.random() * c) - c, d[4 * i + j] += k; |
|||
return a; |
|||
} |
|||
}; |
|||
}); |
|||
}("psLib"), function(a) { |
|||
ShearPhoto[a].module("oilPainting", function() { |
|||
return { |
|||
process:function(a, b) { |
|||
var c, d, e, f, g, h, i, j, k; |
|||
for (c = parseInt(b[0]) || 16, d = a.data, e = a.width, f = a.height, g = 0; e > g; g++) for (h = 0; f > h; h++) { |
|||
for (i = h * e + g, j = 0, k = 0; 3 > k; k++) j += d[4 * i + k]; |
|||
for (j /= 3, j = parseInt(j / c) * c, k = 0; 3 > k; k++) d[4 * i + k] = j; |
|||
} |
|||
return a; |
|||
} |
|||
}; |
|||
}); |
|||
}("psLib"), function(a) { |
|||
ShearPhoto[a].module("setHSI", function(a) { |
|||
return { |
|||
process:function(b, c) { |
|||
return c[0] = c[0] / 180 * Math.PI, c[1] = c[1] / 100 || 0, c[2] = 255 * (c[2] / 100) || 0, |
|||
c[3] = c[3] || !1, a.lib.dorsyMath.applyInHSI(b, function(a) { |
|||
c[3] ? (a.H = c[0], a.S = c[1]) :(a.H += c[0], a.S += c[1]), a.I += c[2]; |
|||
}), b; |
|||
} |
|||
}; |
|||
}); |
|||
}("psLib"), function(a) { |
|||
ShearPhoto[a].module("sharp", function() { |
|||
return { |
|||
process:function(a, b) { |
|||
var c, d, e, f, g, h, i, j, k; |
|||
for (c = b[0] || .6, d = a.data, e = a.width, f = 0, g = d.length; g > f; f += 4) if (h = f / 4, |
|||
i = parseInt(h / e), j = h % e, 0 != i && 0 != j) for (k = 4 * ((i - 1) * e + (j - 1)), |
|||
i = 4 * ((i - 1) * e + j), h = 4 * (h - 1), j = 0; 3 > j; j++) d[f + j] += (d[f + j] - (d[i + j] + d[h + j] + d[k + j]) / 3) * c; |
|||
return a; |
|||
} |
|||
}; |
|||
}); |
|||
}("psLib"), function(a) { |
|||
ShearPhoto[a].module("toGray", function() { |
|||
return { |
|||
process:function(a) { |
|||
var b, c, d, e; |
|||
for (b = a.data, c = 0, d = b.length; d > c; c += 4) e = parseInt((b[c] + b[c + 1] + b[c + 2]) / 3), |
|||
b[c + 2] = b[c + 1] = b[c] = e; |
|||
return a.data = b, a; |
|||
} |
|||
}; |
|||
}); |
|||
}("psLib"), function(a) { |
|||
ShearPhoto[a].module("toReverse", function() { |
|||
return { |
|||
process:function(a) { |
|||
for (var b = a.data, c = 0, d = b.length; d > c; c += 4) b[c] = 255 - b[c], b[c + 1] = 255 - b[c + 1], |
|||
b[c + 2] = 255 - b[c + 2]; |
|||
return a.data = b, a; |
|||
} |
|||
}; |
|||
}); |
|||
}("psLib"), function(a) { |
|||
ShearPhoto[a].module("toThresh", function(a) { |
|||
return { |
|||
process:function(b, c) { |
|||
var d, e, f; |
|||
for (b = a.lib.toGray.process(b), d = b.data, c = c[0] || 128, e = 0, f = d.length; f > e; e++) (e + 1) % 4 && (d[e] = d[e] > c ? 255 :0); |
|||
return b.data = d, b; |
|||
} |
|||
}; |
|||
}); |
|||
}("psLib"); |
|||
}catch(e){} |
|||
@ -0,0 +1,183 @@ |
|||
window.ShearPhoto.MINGGE(function() { |
|||
var relativeUrl= SHEAR.PATH_RES+"/shearphoto";//by rainfer,相对路径
|
|||
var avatarUrl= SHEAR.PATH_AVATAR;//by rainfer,头像路径
|
|||
relativeUrl = relativeUrl.replace(/(^\s*)|(\s*$)/g, "");//去掉相对路径的所有空格
|
|||
relativeUrl === "" || (relativeUrl += "/");//在相对地址后面加斜框,不需要用户自己加
|
|||
var publicRelat= document.getElementById("relat"); //"relat"对像
|
|||
var publicRelatImg=publicRelat.getElementsByTagName("img"); //"relat"下的两张图片对像
|
|||
var Shear = new ShearPhoto; |
|||
Shear.config({ |
|||
relativeUrl:relativeUrl, //取回相对路径
|
|||
avatarUrl:avatarUrl,//by rainfer,头像路径
|
|||
traverse:true,//可选 true,false 。 是否在拖动或拉伸时允许历遍全图(是否让大图动呢),
|
|||
translate3d:false, //是否开启3D移动,CPU加速。可选true false。默认关闭的
|
|||
HTML5:true,//可选 true,false 是否使用HTML5进行切图
|
|||
HTML5MAX:500, //默认请设0 (最大尺寸做事), HTML上传截图最大宽度, 宽度越大,HTML5截出来的图片容量越大,服务器压力就大,截图就更清淅
|
|||
HTML5Quality:0.9, //截好的截图 0至1范围可选(可填小数) HTML5切图的质量 为1时 最高
|
|||
HTML5FilesSize:50, //如果是HTML5切图时,选择的图片不能超过多少,单位M
|
|||
HTML5Effects:true,//是否开启图片特效功能给用户 可选true false, 提示:有HTML5浏览器才会开启的!当然开启HTML5切图,该设置才有效
|
|||
HTML5ZIP:[900,0.9],//HTML5截图前载入的大图 是否压缩图片(数组成员 是数字)
|
|||
preview:[150],// 开启动态预览图片 (数组成员整数型,禁止含小数点 可选false 和数组)
|
|||
url:relativeUrl+"php/shearphoto.php", //后端处理地址
|
|||
scopeWidth:400, //可拖动范围宽 也就是"main"对象的初始大小(整数型,禁止含小数点) 宽和高的值最好能一致
|
|||
scopeHeight:400, //可拖动范围高 也就是"main"对象的初始大小(整数型,禁止含小数点) 宽和高的值最好能一致
|
|||
proportional:[1/1,100,133], |
|||
Min:50, //截框拉伸或拖拽不能少于多少PX(整数型,禁止含小数点)
|
|||
Max:500, //一开始启动时,图片的宽和高,有时候图片会很大的,必须要设置一下(整数型,禁止含小数点)
|
|||
backgroundColor:"#000", //遮层色
|
|||
backgroundOpacity:0.6, //遮层透明度-数字0-1 可选
|
|||
Border:0, //截框的边框大小 0代表动态边框。大于0表示静态边框,大于0时也代表静态边框的粗细值
|
|||
BorderStyle:"solid", //只作用于静态边框,截框的边框类型,其实是引入CSS的border属性,和CSS2的border属性是一样的
|
|||
BorderColor:"#09F", //只作用于静态边框,截框的边框色彩
|
|||
relat:publicRelat, //请查看 id:"relat"对象
|
|||
scope:document.getElementById("main"),//main范围对象
|
|||
ImgDom:publicRelatImg[0], //截图图片对象(小)
|
|||
ImgMain:publicRelatImg[1], //截图图片对象(大)
|
|||
black:document.getElementById("black"),//黑色遮层对象
|
|||
form:document.getElementById("smallbox"),//截框对象
|
|||
ZoomDist:document.getElementById("ZoomDist"),//放大工具条,可从HTML查看此对象,不作详细解释了
|
|||
ZoomBar:document.getElementById("ZoomBar"), //放大工具条,可从HTML查看此对象
|
|||
to:{ |
|||
BottomRight:document.getElementById("BottomRight"),//拉伸点中右
|
|||
TopRight:document.getElementById("TopRight"),//拉伸点上右,下面如此类推,一共8点进行拉伸,下面不再作解释
|
|||
Bottomleft:document.getElementById("Bottomleft"), |
|||
Topleft:document.getElementById("Topleft"), |
|||
Topmiddle:document.getElementById("Topmiddle"), |
|||
leftmiddle:document.getElementById("leftmiddle"), |
|||
Rightmiddle:document.getElementById("Rightmiddle"), |
|||
Bottommiddle:document.getElementById("Bottommiddle") |
|||
}, |
|||
Effects:document.getElementById("shearphoto_Effects") || false, |
|||
DynamicBorder:[document.getElementById("borderTop"),document.getElementById("borderLeft"),document.getElementById("borderRight"),document.getElementById("borderBottom")], |
|||
SelectBox:document.getElementById("SelectBox"), //选择图片方式的对象
|
|||
Shearbar:document.getElementById("Shearbar"), //截图工具条对象
|
|||
UpFun:function() { //鼠标健松开时执行函数
|
|||
Shear.MoveDiv.DivWHFun(); //把截框现时的宽高告诉JS
|
|||
} |
|||
}); |
|||
Shear.complete=function(serverdata) {//截图成功完成时,由shearphoto.php返回数据过来的成功包
|
|||
//alert(SHEAR.URL);//你可以调试一下这个返回包
|
|||
var point = this.arg.scope.childNodes[0]; |
|||
point.className === "point" && this.arg.scope.removeChild(point); |
|||
var complete = document.createElement("div"); |
|||
complete.className = "complete"; |
|||
complete.style.height = this.arg.scopeHeight + "px"; |
|||
this.arg.scope.insertBefore(complete, this.arg.scope.childNodes[0]); |
|||
var length = serverdata.length,creatImg; |
|||
for (var i = 0; i < length; i++) |
|||
{ |
|||
creatImg = document.createElement("img"); |
|||
complete.appendChild(creatImg); |
|||
creatImg.src=this.arg.avatarUrl +"/"+ serverdata[i]["ImgUrl"]; |
|||
} |
|||
this.HTML5.EffectsReturn(); |
|||
this.HTML5.BOLBID && this.HTML5.URL.revokeObjectURL(this.HTML5.BOLBID); |
|||
var this_ = this; |
|||
this_.preview.close_(); |
|||
////by rainfer,增加ajax开始
|
|||
$.post(SHEAR.URL, |
|||
{'imgurl':serverdata[0]['ImgUrl']}, |
|||
function(data){ |
|||
if(data.code==1){ |
|||
layer.alert(data.msg, {icon: 6}, function(index){ |
|||
layer.close(index); |
|||
window.location.href=data.url; |
|||
}); |
|||
}else{ |
|||
layer.alert(data.msg, {icon: 5}, function(index){ |
|||
layer.close(index); |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
var photoalbum = document.getElementById("photoalbum");//相册对象
|
|||
var ShearPhotoForm = document.getElementById("ShearPhotoForm");//FORM对象
|
|||
ShearPhotoForm.UpFile.onclick=function(){return false}//一开始时先不让用户点免得事件阻塞
|
|||
var up = new ShearPhoto.frameUpImg({ |
|||
url:relativeUrl+"php/upload.php", //HTML5切图时,不会用到该文件,后端处理地址
|
|||
FORM:ShearPhotoForm, //FORM对象传到设置
|
|||
UpType:new Array("jpg", "jpeg", "png", "gif"),//图片类限制,上传的一定是图片,你就不要更改了
|
|||
FilesSize:2, //选择的图片不能超过 单位M(注意:是非HTML5时哦)
|
|||
HTML5:Shear.HTML5, |
|||
HTML5FilesSize:Shear.arg.HTML5FilesSize, |
|||
HTML5ZIP:Shear.arg.HTML5ZIP, |
|||
erro:function(msg) { |
|||
Shear.pointhandle(3e3, 10, msg, 0, "#f82373", "#fff"); |
|||
}, |
|||
fileClick:function(){//先择图片被点击时,触发的事件
|
|||
Shear.pointhandle(-1);//关闭提示,防止线程阻塞事件冒泡
|
|||
}, |
|||
preced:function(fun) { //点击选择图,载入图片时的事件
|
|||
try{ |
|||
photoalbum.style.display = "none"; //什么情况下都关了相册
|
|||
camClose.onclick(); //什么情况下都关了视频
|
|||
}catch (e){console.log("在加载图片时,发现相册的对象检测不到,错误代码:"+e);} |
|||
Shear.pointhandle(0, 10, "正在为你加载图片,请你稍等哦......", 2, "#307ff6", "#fff",fun); |
|||
} |
|||
}); |
|||
|
|||
up.run(function(data,True) {//upload.php成功返回数据后
|
|||
True || (data = ShearPhoto.JsonString.StringToJson(data)); |
|||
if (data === false) { |
|||
Shear.SendUserMsg("错误:请保证后端环境运行正常", 5e3, 0, "#f4102b", "#fff", true,true); |
|||
return; |
|||
} |
|||
if (data["erro"]) { |
|||
Shear.SendUserMsg("错误:" + data["erro"], 5e3, 0, "#f4102b", "#fff", true,true); |
|||
return; |
|||
} |
|||
Shear.run(data["success"],true); |
|||
}); |
|||
|
|||
try{ |
|||
var AllType= {".jpg":"image/jpeg", ".jpeg":"image/jpeg", ".gif":"image/jpeg", ".png":"image/png"}; |
|||
var URLType =function(url){ |
|||
return AllType[/\.[^.]+$/.exec(url)] || "image/jpeg";//取后缀
|
|||
} |
|||
var DE = document.documentElement; |
|||
var PhotoLoading = document.getElementById("PhotoLoading"); |
|||
var photoalbumLi = photoalbum.getElementsByTagName("li"); |
|||
var photoalbumLifun = function() { |
|||
var serveUrl= this.getElementsByTagName("img")[0].getAttribute("serveUrl"); |
|||
Shear.HTML5.ImagesType=URLType(serveUrl);//告诉HTML5,图片的类型
|
|||
Shear.run(serveUrl); //通过API 接口,加载图片
|
|||
photoalbum.style.display = "none"; |
|||
}; |
|||
|
|||
for (var i = 0; i < photoalbumLi.length; i++) photoalbumLi[i].onclick = photoalbumLifun;//为相册的每张照加入一个点击事件
|
|||
PhotoLoading.onclick = function() { //从相册选取事件
|
|||
photoalbum.style.display = "block"; |
|||
|
|||
|
|||
}; |
|||
document.getElementById("close").onclick = function() { //关闭相册事件
|
|||
photoalbum.style.display = "none"; |
|||
}; |
|||
}catch (e){console.log("相册对象检测有误,错误代码:"+e );} |
|||
|
|||
Shear.addEvent(document.getElementById("saveShear"), "click", function() { //按下截图事件,提交到后端的shearphoto.php接收
|
|||
Shear.SendPHP({shearphoto:"",mingge:""});//我们示例截图并且传参数,后端文件shearphoto.php用 示例:$_POST["shearphoto"] 接收参数,不需要传参数请清空Shear.SendPHP里面的参数示例 Shear.SendPHP();
|
|||
|
|||
}); |
|||
|
|||
Shear.addEvent(document.getElementById("LeftRotate"), "click", function() {//向左旋转事件
|
|||
Shear.Rotate("left"); |
|||
}); |
|||
|
|||
Shear.addEvent(document.getElementById("RightRotate"), "click", function() { //向右旋转事件
|
|||
Shear.Rotate("right"); |
|||
}); |
|||
|
|||
Shear.addEvent(document.getElementById("againIMG"), "click", function() { //重新选择事件
|
|||
Shear.preview.close_(); |
|||
Shear.again(); |
|||
Shear.HTML5.EffectsReturn(); |
|||
Shear.HTML5.BOLBID && Shear.HTML5.URL.revokeObjectURL(Shear.HTML5.BOLBID); |
|||
Shear.pointhandle(3e3, 10, "已取消!重新选择", 2, "#fbeb61", "#3a414c"); |
|||
}); |
|||
var shearphoto_loading=document.getElementById("shearphoto_loading"); |
|||
var shearphoto_main=document.getElementById("shearphoto_main"); |
|||
shearphoto_loading && shearphoto_loading.parentNode.removeChild(shearphoto_loading); |
|||
shearphoto_main.style.visibility="visible"; |
|||
}); |
|||
@ -0,0 +1,185 @@ |
|||
window.ShearPhoto.MINGGE(function() { |
|||
var relativeUrl= SHEAR.PATH_RES+"/shearphoto";//by rainfer,相对路径
|
|||
var avatarUrl= SHEAR.PATH_AVATAR;//by rainfer,头像路径
|
|||
relativeUrl = relativeUrl.replace(/(^\s*)|(\s*$)/g, "");//去掉相对路径的所有空格
|
|||
relativeUrl === "" || (relativeUrl += "/");//在相对地址后面加斜框,不需要用户自己加
|
|||
var publicRelat= document.getElementById("relat"); //"relat"对像
|
|||
var publicRelatImg=publicRelat.getElementsByTagName("img"); //"relat"下的两张图片对像
|
|||
var Shear = new ShearPhoto; |
|||
Shear.config({ |
|||
relativeUrl:relativeUrl, //取回相对路径
|
|||
avatarUrl:avatarUrl,//by rainfer,头像路径
|
|||
traverse:true,//可选 true,false 。 是否在拖动或拉伸时允许历遍全图(是否让大图动呢),
|
|||
translate3d:false, //是否开启3D移动,CPU加速。可选true false。默认关闭的
|
|||
HTML5:true,//可选 true,false 是否使用HTML5进行切图
|
|||
HTML5MAX:500, //默认请设0 (最大尺寸做事), HTML上传截图最大宽度, 宽度越大,HTML5截出来的图片容量越大,服务器压力就大,截图就更清淅
|
|||
HTML5Quality:0.9, //截好的截图 0至1范围可选(可填小数) HTML5切图的质量 为1时 最高
|
|||
HTML5FilesSize:50, //如果是HTML5切图时,选择的图片不能超过多少,单位M
|
|||
HTML5Effects:true,//是否开启图片特效功能给用户 可选true false, 提示:有HTML5浏览器才会开启的!当然开启HTML5切图,该设置才有效
|
|||
HTML5ZIP:[900,0.9],//HTML5截图前载入的大图 是否压缩图片(数组成员 是数字)
|
|||
preview:[100],// 开启动态预览图片 (数组成员整数型,禁止含小数点 可选false 和数组)
|
|||
url:relativeUrl+"php/shearphoto.php", //后端处理地址
|
|||
scopeWidth:300, //可拖动范围宽 也就是"main"对象的初始大小(整数型,禁止含小数点) 宽和高的值最好能一致
|
|||
scopeHeight:300, //可拖动范围高 也就是"main"对象的初始大小(整数型,禁止含小数点) 宽和高的值最好能一致
|
|||
proportional:[1/1,100,133], |
|||
Min:50, //截框拉伸或拖拽不能少于多少PX(整数型,禁止含小数点)
|
|||
Max:300, //一开始启动时,图片的宽和高,有时候图片会很大的,必须要设置一下(整数型,禁止含小数点)
|
|||
backgroundColor:"#000", //遮层色
|
|||
backgroundOpacity:0.6, //遮层透明度-数字0-1 可选
|
|||
Border:0, //截框的边框大小 0代表动态边框。大于0表示静态边框,大于0时也代表静态边框的粗细值
|
|||
BorderStyle:"solid", //只作用于静态边框,截框的边框类型,其实是引入CSS的border属性,和CSS2的border属性是一样的
|
|||
BorderColor:"#09F", //只作用于静态边框,截框的边框色彩
|
|||
relat:publicRelat, //请查看 id:"relat"对象
|
|||
scope:document.getElementById("main"),//main范围对象
|
|||
ImgDom:publicRelatImg[0], //截图图片对象(小)
|
|||
ImgMain:publicRelatImg[1], //截图图片对象(大)
|
|||
black:document.getElementById("black"),//黑色遮层对象
|
|||
form:document.getElementById("smallbox"),//截框对象
|
|||
ZoomDist:document.getElementById("ZoomDist"),//放大工具条,可从HTML查看此对象,不作详细解释了
|
|||
ZoomBar:document.getElementById("ZoomBar"), //放大工具条,可从HTML查看此对象
|
|||
to:{ |
|||
BottomRight:document.getElementById("BottomRight"),//拉伸点中右
|
|||
TopRight:document.getElementById("TopRight"),//拉伸点上右,下面如此类推,一共8点进行拉伸,下面不再作解释
|
|||
Bottomleft:document.getElementById("Bottomleft"), |
|||
Topleft:document.getElementById("Topleft"), |
|||
Topmiddle:document.getElementById("Topmiddle"), |
|||
leftmiddle:document.getElementById("leftmiddle"), |
|||
Rightmiddle:document.getElementById("Rightmiddle"), |
|||
Bottommiddle:document.getElementById("Bottommiddle") |
|||
}, |
|||
Effects:document.getElementById("shearphoto_Effects") || false, |
|||
DynamicBorder:[document.getElementById("borderTop"),document.getElementById("borderLeft"),document.getElementById("borderRight"),document.getElementById("borderBottom")], |
|||
SelectBox:document.getElementById("SelectBox"), //选择图片方式的对象
|
|||
Shearbar:document.getElementById("Shearbar"), //截图工具条对象
|
|||
UpFun:function() { //鼠标健松开时执行函数
|
|||
Shear.MoveDiv.DivWHFun(); //把截框现时的宽高告诉JS
|
|||
} |
|||
}); |
|||
Shear.complete=function(serverdata) {//截图成功完成时,由shearphoto.php返回数据过来的成功包
|
|||
//alert(SHEAR.URL);//你可以调试一下这个返回包
|
|||
var point = this.arg.scope.childNodes[0]; |
|||
point.className === "point" && this.arg.scope.removeChild(point); |
|||
var complete = document.createElement("div"); |
|||
complete.className = "complete"; |
|||
complete.style.height = this.arg.scopeHeight + "px"; |
|||
this.arg.scope.insertBefore(complete, this.arg.scope.childNodes[0]); |
|||
var length = serverdata.length,creatImg; |
|||
for (var i = 0; i < length; i++) |
|||
{ |
|||
creatImg = document.createElement("img"); |
|||
complete.appendChild(creatImg); |
|||
creatImg.src=this.arg.avatarUrl +"/"+ serverdata[i]["ImgUrl"]; |
|||
} |
|||
this.HTML5.EffectsReturn(); |
|||
this.HTML5.BOLBID && this.HTML5.URL.revokeObjectURL(this.HTML5.BOLBID); |
|||
var this_ = this; |
|||
this_.preview.close_(); |
|||
////by rainfer,增加ajax开始
|
|||
$.post(SHEAR.URL, |
|||
{'imgurl':serverdata[0]['ImgUrl']}, |
|||
function(data){ |
|||
if(data.code==1){ |
|||
layer.alert(data.msg, {icon: 6}, function(index){ |
|||
layer.close(index); |
|||
window.location.href=data.url; |
|||
}); |
|||
}else{ |
|||
layer.alert(data.msg, {icon: 5}, function(index){ |
|||
layer.close(index); |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
var photoalbum = document.getElementById("photoalbum");//相册对象
|
|||
var ShearPhotoForm = document.getElementById("ShearPhotoForm");//FORM对象
|
|||
ShearPhotoForm.UpFile.onclick=function(){return false}//一开始时先不让用户点免得事件阻塞
|
|||
var up = new ShearPhoto.frameUpImg({ |
|||
url:relativeUrl+"php/upload.php", //HTML5切图时,不会用到该文件,后端处理地址
|
|||
FORM:ShearPhotoForm, //FORM对象传到设置
|
|||
UpType:new Array("jpg", "jpeg", "png", "gif"),//图片类限制,上传的一定是图片,你就不要更改了
|
|||
FilesSize:2, //选择的图片不能超过 单位M(注意:是非HTML5时哦)
|
|||
HTML5:Shear.HTML5, |
|||
HTML5FilesSize:Shear.arg.HTML5FilesSize, |
|||
HTML5ZIP:Shear.arg.HTML5ZIP, |
|||
erro:function(msg) { |
|||
Shear.pointhandle(3e3, 10, msg, 0, "#f82373", "#fff"); |
|||
}, |
|||
fileClick:function(){//先择图片被点击时,触发的事件
|
|||
Shear.pointhandle(-1);//关闭提示,防止线程阻塞事件冒泡
|
|||
}, |
|||
preced:function(fun) { //点击选择图,载入图片时的事件
|
|||
try{ |
|||
photoalbum.style.display = "none"; //什么情况下都关了相册
|
|||
camClose.onclick(); //什么情况下都关了视频
|
|||
}catch (e){console.log("在加载图片时,发现相册的对象检测不到,错误代码:"+e);} |
|||
Shear.pointhandle(0, 10, "正在为你加载图片,请你稍等哦......", 2, "#307ff6", "#fff",fun); |
|||
} |
|||
}); |
|||
|
|||
up.run(function(data,True) {//upload.php成功返回数据后
|
|||
True || (data = ShearPhoto.JsonString.StringToJson(data)); |
|||
if (data === false) { |
|||
Shear.SendUserMsg("错误:请保证后端环境运行正常", 5e3, 0, "#f4102b", "#fff", true,true); |
|||
return; |
|||
} |
|||
if (data["erro"]) { |
|||
Shear.SendUserMsg("错误:" + data["erro"], 5e3, 0, "#f4102b", "#fff", true,true); |
|||
return; |
|||
} |
|||
Shear.run(data["success"],true); |
|||
}); |
|||
|
|||
try{ |
|||
var AllType= {".jpg":"image/jpeg", ".jpeg":"image/jpeg", ".gif":"image/jpeg", ".png":"image/png"}; |
|||
var URLType =function(url){ |
|||
return AllType[/\.[^.]+$/.exec(url)] || "image/jpeg";//取后缀
|
|||
} |
|||
var DE = document.documentElement; |
|||
var PhotoLoading = document.getElementById("PhotoLoading"); |
|||
var photoalbumLi = photoalbum.getElementsByTagName("li"); |
|||
var photoalbumLifun = function() { |
|||
var serveUrl= this.getElementsByTagName("img")[0].getAttribute("serveUrl"); |
|||
Shear.HTML5.ImagesType=URLType(serveUrl);//告诉HTML5,图片的类型
|
|||
Shear.run(serveUrl); //通过API 接口,加载图片
|
|||
photoalbum.style.display = "none"; |
|||
}; |
|||
|
|||
for (var i = 0; i < photoalbumLi.length; i++) photoalbumLi[i].onclick = photoalbumLifun;//为相册的每张照加入一个点击事件
|
|||
PhotoLoading.onclick = function() { //从相册选取事件
|
|||
photoalbum.style.display = "block"; |
|||
|
|||
|
|||
}; |
|||
document.getElementById("close").onclick = function() { //关闭相册事件
|
|||
photoalbum.style.display = "none"; |
|||
}; |
|||
}catch (e){console.log("相册对象检测有误,错误代码:"+e );} |
|||
|
|||
Shear.addEvent(document.getElementById("saveShear"), "click", function() { //按下截图事件,提交到后端的shearphoto.php接收
|
|||
Shear.SendPHP({shearphoto:"",mingge:""});//我们示例截图并且传参数,后端文件shearphoto.php用 示例:$_POST["shearphoto"] 接收参数,不需要传参数请清空Shear.SendPHP里面的参数示例 Shear.SendPHP();
|
|||
|
|||
}); |
|||
|
|||
Shear.addEvent(document.getElementById("LeftRotate"), "click", function() {//向左旋转事件
|
|||
Shear.Rotate("left"); |
|||
}); |
|||
|
|||
Shear.addEvent(document.getElementById("RightRotate"), "click", function() { //向右旋转事件
|
|||
Shear.Rotate("right"); |
|||
}); |
|||
|
|||
Shear.addEvent(document.getElementById("againIMG"), "click", function() { //重新选择事件
|
|||
Shear.preview.close_(); |
|||
Shear.again(); |
|||
Shear.HTML5.EffectsReturn(); |
|||
Shear.HTML5.BOLBID && Shear.HTML5.URL.revokeObjectURL(Shear.HTML5.BOLBID); |
|||
Shear.pointhandle(3e3, 10, "已取消!重新选择", 2, "#fbeb61", "#3a414c"); |
|||
}); |
|||
|
|||
|
|||
var shearphoto_loading=document.getElementById("shearphoto_loading"); |
|||
var shearphoto_main=document.getElementById("shearphoto_main"); |
|||
shearphoto_loading && shearphoto_loading.parentNode.removeChild(shearphoto_loading); |
|||
shearphoto_main.style.visibility="visible"; |
|||
}); |
|||
@ -0,0 +1,21 @@ |
|||
<?php |
|||
define('IOURL', dirname(dirname(__FILE__))); //锁定相对目录 |
|||
define('ROOT', dirname(dirname(IOURL)) . DIRECTORY_SEPARATOR);//网站根目录,//DIRECTORY_SEPARATOR 是斜杠符,为兼容WINDOW和LINUX,设置头像保存路径 |
|||
define('ShearURL', ROOT . 'data'. DIRECTORY_SEPARATOR . 'upload' . DIRECTORY_SEPARATOR . 'avatar' . DIRECTORY_SEPARATOR); |
|||
$ShearPhoto["config"] = array( |
|||
"proportional" => 1 / 1,//比例截图 |
|||
"quality" => 85,// 截图质量,0为一般质量(质量大概75左右), 0-100可选 |
|||
"force_jpg" => true,// 是否强制截好的图片是JPG格式 可选 true false |
|||
"width" => array(//自定义设置生成截图的张数,大小,在这设,看好下面! |
|||
//array(0,true,"name0"),//此时的0 代表以用户取当时截取框的所截的大小为宽 |
|||
//array(-1,true,"name1"),//此时的-1 代表以原图为基准,获得截图 |
|||
array(200, true, ""),//@参数1要生成的宽 (高度不用设,系统会按比例做事), @参数2:是否为该图加水印,water参数要有水印地址才有效true或false @参数3:图片后面添加字符串 |
|||
), |
|||
"water" => false,//只接受PNG水印,当然你对PHP熟练,你可以对主程序进行修改支持其他类型水印,不设就"water"=>false |
|||
"water_scope" => 100, //图片少于多少不添加水印!没填水印地址,这里不起任何作用 |
|||
"temp" => ShearURL . "temp", //等待截图的大图文件。就是上传图片的临时目录 |
|||
"tempSaveTime" => 600,//临时图片(也就是temp内的图片)保存时间,需要永久保存请设为0。单位秒 |
|||
"saveURL" => ShearURL,//截好后的图片。储存的目录位置,后面不要加斜杠 |
|||
"filename" => uniqid("")//截好后的图片的文件名字定义!要生成多个文件时 系统会自动在后面补上 |
|||
); |
|||
?> |
|||
@ -0,0 +1,264 @@ |
|||
<?php |
|||
header('Content-type:text/html;charset=utf-8'); //编码 |
|||
error_reporting(E_ALL & ~E_NOTICE & ~E_WARNING); //关闭错误提示 |
|||
require("shearphoto.config.php"); //加载设置文件 |
|||
class ShearPhoto |
|||
{ |
|||
public $erro = false; |
|||
|
|||
protected function rotate($src, $R) |
|||
{ |
|||
$arr = array(90, 180, 270); |
|||
if (in_array($R, $arr)) { |
|||
$rotatesrc = imagerotate($src, $R, 0); |
|||
imagedestroy($src); |
|||
} else { |
|||
return $src; |
|||
} |
|||
return $rotatesrc; |
|||
} |
|||
|
|||
public function html5_run(&$PHPconfig, &$JSconfig) |
|||
{ |
|||
$ShearPhoto["config"] = $PHPconfig; |
|||
if (is_bool($PHPconfig["proportional"])) { |
|||
$PHPconfig["proportional"] = $JSconfig["P"]; |
|||
} elseif ($PHPconfig["proportional"] != $JSconfig["P"]) { |
|||
$this->erro = "JS设置的比例和PHP设置不一致!"; |
|||
return false; |
|||
} |
|||
require("shearphoto.up.php"); |
|||
$tempurl = $PHPconfig["temp"] . DIRECTORY_SEPARATOR . "shearphoto.lock"; |
|||
!file_exists($tempurl) && file_put_contents($tempurl, "ShearPhoto Please don't delete"); |
|||
$this->delTempImg($PHPconfig["temp"], $PHPconfig["tempSaveTime"]); |
|||
$imagecreatefrom = $this->imagecreatefrom($_FILES['UpFile']['tmp_name'], $int_type[2]); |
|||
if (!$imagecreatefrom) return false; |
|||
list($src, $GdFun) = $imagecreatefrom; |
|||
return $this->compression($src, $PHPconfig, $JSconfig, $int_type[2], $GdFun); |
|||
} |
|||
|
|||
protected function delTempImg($temp, $deltime) |
|||
{ |
|||
if ($deltime == 0) return; |
|||
$dir = opendir($temp); |
|||
$time = time(); |
|||
while (($file = readdir($dir)) !== false) { |
|||
if ($file != "." and $file != ".." and $file != "shearphoto.lock") { |
|||
$fileUrl = $temp . DIRECTORY_SEPARATOR . $file; |
|||
$pastTime = $time - filemtime($fileUrl); |
|||
if ($pastTime < 0 || $pastTime > $deltime) @unlink($fileUrl); |
|||
} |
|||
} |
|||
closedir($dir); |
|||
} |
|||
|
|||
public function run(&$JSconfig, &$PHPconfig) |
|||
{ |
|||
$tempurl = $PHPconfig["temp"] . DIRECTORY_SEPARATOR . "shearphoto.lock"; |
|||
!file_exists($tempurl) && file_put_contents($tempurl, "ShearPhoto Please don't delete"); |
|||
$this->delTempImg($PHPconfig["temp"], $PHPconfig["tempSaveTime"]); |
|||
//var_dump($JSconfig["url"]); |
|||
if (!isset($JSconfig["url"]) || !isset($JSconfig["R"]) || !isset($JSconfig["X"]) || !isset($JSconfig["Y"]) || !isset($JSconfig["IW"]) || !isset($JSconfig["IH"]) || !isset($JSconfig["P"]) || !isset($JSconfig["FW"]) || !isset($JSconfig["FH"])) { |
|||
$this->erro = "服务端接收到的数据缺少参数"; |
|||
return false; |
|||
} |
|||
//var_dump($JSconfig["url"]); |
|||
if (!file_exists($JSconfig["url"])) { |
|||
$this->erro = "此图片路径有误"; |
|||
return false; |
|||
} |
|||
foreach ($JSconfig as $k => $v) { |
|||
if ($k !== "url") { //验证是否为数字除了url参数之外 |
|||
if (!is_numeric($v)) { |
|||
$this->erro = "传递的参数有误"; |
|||
return false; |
|||
} |
|||
} |
|||
} |
|||
if (is_bool($PHPconfig["proportional"])) { |
|||
$PHPconfig["proportional"] = $JSconfig["P"]; |
|||
} elseif ($PHPconfig["proportional"] != $JSconfig["P"]) { |
|||
$this->erro = "JS设置的比例和PHP设置不一致!"; |
|||
return false; |
|||
} |
|||
list($w, $h, $type) = getimagesize($JSconfig["url"]); |
|||
$strtype = image_type_to_extension($type); |
|||
$type_array = array( |
|||
".jpeg", |
|||
".gif", |
|||
".png", |
|||
".jpg" |
|||
); |
|||
if (!in_array(strtolower($strtype), $type_array)) { |
|||
$this->erro = "无法读取图片"; |
|||
return false; |
|||
} |
|||
|
|||
if ($JSconfig["R"] == 90 || $JSconfig["R"] == 270) { |
|||
list($w, $h) = array( |
|||
$h, |
|||
$w |
|||
); |
|||
} |
|||
return $this->createshear($PHPconfig, $w, $h, $type, $JSconfig); |
|||
} |
|||
|
|||
protected function imagecreatefrom($url, $type) |
|||
{ |
|||
switch ($type) { |
|||
case 1: |
|||
$src = @imagecreatefromgif($url); |
|||
$GdFun = array( |
|||
"imagegif", |
|||
".gif" |
|||
); |
|||
break; |
|||
|
|||
case 2: |
|||
$src = @imagecreatefromjpeg($url); |
|||
$GdFun = array( |
|||
"imagejpeg", |
|||
".jpg" |
|||
); |
|||
break; |
|||
|
|||
case 3: |
|||
$src = @imagecreatefrompng($url); |
|||
$GdFun = array( |
|||
"imagepng", |
|||
".png" |
|||
); |
|||
break; |
|||
|
|||
default: |
|||
$this->erro = "不支持的类型"; |
|||
return false; |
|||
break; |
|||
} |
|||
return array($src, $GdFun); |
|||
} |
|||
|
|||
protected function createshear(&$PHPconfig, $w, $h, $type, &$JSconfig) |
|||
{ |
|||
$imagecreatefrom = $this->imagecreatefrom($JSconfig["url"], $type); |
|||
if (!$imagecreatefrom) return false; |
|||
list($src, $GdFun) = $imagecreatefrom; |
|||
$src = $this->rotate($src, $JSconfig["R"]); |
|||
$dest = imagecreatetruecolor($JSconfig["IW"], $JSconfig["IH"]); |
|||
$white = imagecolorallocate($dest, 255, 255, 255); |
|||
imagefill($dest, 0, 0, $white); |
|||
imagecopy($dest, $src, 0, 0, $JSconfig["X"], $JSconfig["Y"], $w, $h); |
|||
imagedestroy($src); |
|||
return $this->compression($dest, $PHPconfig, $JSconfig, $type, $GdFun); |
|||
} |
|||
|
|||
protected function CreateArray(&$PHPconfig, &$JSconfig) |
|||
{ |
|||
$arr = array(); |
|||
if ($PHPconfig["proportional"] > 0) { |
|||
$proportion = $PHPconfig["proportional"]; |
|||
} else { |
|||
$proportion = $JSconfig["IW"] / $JSconfig["IH"]; |
|||
} |
|||
$water_or = isset($PHPconfig["water"]) && $PHPconfig["water"] && file_exists($PHPconfig["water"]) && is_numeric($PHPconfig["water_scope"]); |
|||
if (!file_exists($PHPconfig["saveURL"])) { |
|||
if (!mkdir($PHPconfig["saveURL"], 0777, true)) { |
|||
$this->erro = "目录权限有问题"; |
|||
return false; |
|||
} |
|||
} |
|||
$file_url = $PHPconfig["saveURL"] . $PHPconfig["filename"]; |
|||
foreach ($PHPconfig["width"] as $k => $v) { |
|||
($v[0] == 0) ? ($v[0] = $JSconfig["FW"]) : ($v[0] == -1) and ($v[0] = $JSconfig["IW"]); |
|||
$height = $v[0] / $proportion; |
|||
$suffix = isset($v[2]) ? $v[2] : "0"; |
|||
$arr[$k] = array( |
|||
$v[0], |
|||
$height, |
|||
$file_url . $suffix, |
|||
($v[1] === true and $water_or === true and $v[0] > $PHPconfig["water_scope"] and $height > $PHPconfig["water_scope"]) |
|||
); |
|||
} |
|||
return array( |
|||
$water_or, |
|||
$arr |
|||
); |
|||
} |
|||
|
|||
protected function compression($DigShear, &$PHPconfig, &$JSconfig, $type, $GdFun) |
|||
{ |
|||
require 'zip_img.php'; |
|||
$arrimg = $this->CreateArray($PHPconfig, $JSconfig); |
|||
if (count($arrimg[1]) < 1) { |
|||
$this->erro = "系统没有检测到处理截图的命令!"; |
|||
return false; |
|||
} |
|||
$arrimg[0] and $arrimg[0] = $PHPconfig["water"]; |
|||
$zip_photo = new zip_img(array( |
|||
"dest" => $DigShear, |
|||
"GdFun" => $GdFun, |
|||
"quality" => isset($PHPconfig["quality"]) ? $PHPconfig["quality"] : false, |
|||
"force_jpg" => isset($PHPconfig["force_jpg"]) && $PHPconfig["force_jpg"], |
|||
"water" => $arrimg[0], |
|||
"water_scope" => $PHPconfig["water_scope"], |
|||
"w" => $JSconfig["IW"], |
|||
"h" => $JSconfig["IH"], |
|||
"type" => $type, |
|||
"zip_array" => $arrimg[1] |
|||
)); |
|||
return $zip_photo->run($this); |
|||
} |
|||
} |
|||
|
|||
/*........................普通截取时开始..........................*/ |
|||
|
|||
if (isset($_POST["JSdate"])) {//普通截取时 |
|||
$ShearPhoto["JSdate"] = json_decode(trim(stripslashes($_POST["JSdate"])), true); |
|||
$Shear = new ShearPhoto; //类实例开始 |
|||
if(stripos($ShearPhoto['JSdate']['url'],'file/photo/')){ |
|||
$ShearPhoto['JSdate']['url']=IOURL.'/file/photo/' . basename($ShearPhoto['JSdate']['url']); |
|||
}else{ |
|||
$ShearPhoto['JSdate']['url']=$ShearPhoto['config']['temp'] . DIRECTORY_SEPARATOR . basename($ShearPhoto['JSdate']['url']); |
|||
} |
|||
$result = $Shear->run($ShearPhoto["JSdate"], $ShearPhoto["config"]); //传入参数运行 |
|||
if ($result === false) { //切图失败时 |
|||
echo '{"erro":"' . $Shear->erro . '"}'; //把错误发给JS /请匆随意更改"erro"的编写方式,否则JS出错 |
|||
exit; |
|||
} else { |
|||
$dirname = pathinfo($ShearPhoto["JSdate"]["url"]); |
|||
$ShearPhotodirname = $dirname["dirname"] . DIRECTORY_SEPARATOR . "shearphoto.lock"; //认证删除的密钥 |
|||
file_exists($ShearPhotodirname) && @unlink($ShearPhoto["JSdate"]["url"]); //密钥存在,当然就删掉原图 |
|||
} |
|||
|
|||
} |
|||
|
|||
/*........................普通截取时结束..........................*/ |
|||
|
|||
|
|||
elseif (isset($_POST["ShearPhotoIW"]) && |
|||
isset($_POST["ShearPhotoIH"]) && |
|||
isset($_POST["ShearPhotoFW"]) && |
|||
isset($_POST["ShearPhotoFH"]) && |
|||
isset($_POST["ShearPhotoP"]) && |
|||
is_numeric($JSconfig["P"]=trim($_POST["ShearPhotoP"]))&& |
|||
is_numeric($JSconfig["IW"]=trim($_POST["ShearPhotoIW"]))&& |
|||
is_numeric($JSconfig["IH"]=trim($_POST["ShearPhotoIH"]))&& |
|||
is_numeric($JSconfig["FW"]=trim($_POST["ShearPhotoFW"]))&& |
|||
is_numeric($JSconfig["FH"]=trim($_POST["ShearPhotoFH"]))){ |
|||
$Shear = new ShearPhoto; //类实例开始 |
|||
$result =$Shear->html5_run($ShearPhoto["config"],$JSconfig);//加载HTML5已切好的图片独有方法 |
|||
if ($result === false) { //切图失败时 |
|||
echo '{"erro":"' . $Shear->erro . '"}'; //把错误发给JS /请匆随意更改"erro"的编写方式,否则JS出错 |
|||
exit; |
|||
} |
|||
} |
|||
/*........................HTML5截取时结束..........................*/ |
|||
|
|||
/*........错误的操作................*/ |
|||
else {die('{"erro":"错误的操作!或缺少参数或错误参数"}');} |
|||
/*........错误的操作................*/ |
|||
|
|||
|
|||
$str_result = json_encode($result); |
|||
echo str_replace("\/", "/", $str_result); //去掉无用的字符修正URL地址,再把数据传弟给JS |
|||
?> |
|||
@ -0,0 +1,59 @@ |
|||
<?php |
|||
$ini_set = array( |
|||
'max_size' => 2 * 1024 * 1024, //文件大小限制设置 M单位 |
|||
'out_time' => 60, //上传超时设置 |
|||
'list' => $ShearPhoto["config"]["temp"].DIRECTORY_SEPARATOR, //上传路径 |
|||
'whitelist' => array( |
|||
".jpeg", |
|||
".gif", |
|||
".png", |
|||
".jpg")//上传的文件后缀 |
|||
); |
|||
/*设置部份结束*/ |
|||
ini_set('max_execution_time', $ini_set['out_time']); |
|||
function HandleError($erro = '系统错误') { |
|||
die('{"erro":"'.$erro.'"}'); |
|||
} |
|||
if (!isset($_FILES['UpFile'])) { |
|||
HandleError(); |
|||
} |
|||
if (isset($_FILES['UpFile']['error']) && $_FILES['UpFile']['error'] != 0) { |
|||
$uploadErrors = array( |
|||
0 => '文件上传成功', |
|||
1 => '上传的文件超过了 php.ini 文件中的 upload_max_filesize directive 里的设置', |
|||
2 => '上传的文件超过了 HTML form 文件中的 MAX_FILE_SIZE directive 里的设置', |
|||
3 => '上传的文件仅为部分文件', |
|||
4 => '没有文件上传', |
|||
6 => '缺少临时文件夹' |
|||
); |
|||
HandleError($uploadErrors[$_FILES['UpFile']['error']]); |
|||
} |
|||
if (!isset($_FILES['UpFile']['tmp_name']) || !@is_uploaded_file($_FILES['UpFile']['tmp_name'])) { |
|||
HandleError('无法找到上传的文件,上传失败'); |
|||
} |
|||
if (!isset($_FILES['UpFile']['name'])) { |
|||
HandleError('上传空名字文件名'); |
|||
} |
|||
$POST_MAX_SIZE = ini_get('post_max_size'); |
|||
$unit = strtoupper(substr($POST_MAX_SIZE, -1)); |
|||
$multiplier = $unit == 'M' ? 1048576 : ($unit == 'K' ? 1024 : ($unit == 'G' ? 1073741824 : 1)); |
|||
if ((int)$_SERVER['CONTENT_LENGTH'] > $multiplier * (int)$POST_MAX_SIZE && $POST_MAX_SIZE) { |
|||
HandleError('超过POST_MAX_SIZE的设置值,请查看PHP.ini的设置'); |
|||
} |
|||
$file_size = @filesize($_FILES['UpFile']['tmp_name']); |
|||
if (!$file_size || $file_size > $ini_set['max_size']) { |
|||
HandleError('零字节文件 或 上传的文件已经超过所设置最大值'); |
|||
} |
|||
$UpFile = array(); |
|||
$int_type = getimagesize($_FILES['UpFile']['tmp_name']); |
|||
$str_type = image_type_to_extension($int_type[2]); |
|||
if (!in_array(strtolower($str_type) , $ini_set['whitelist'])) { |
|||
HandleError('不允许上传此类型文件'); |
|||
} |
|||
$str_type==".jpeg" && ($str_type=".jpg"); |
|||
$UpFile['filename']=uniqid("temp_")."_".mt_rand(100,999).$str_type; |
|||
|
|||
$UpFile['file_url'] = $ini_set['list'] . $UpFile['filename']; |
|||
|
|||
file_exists($ini_set['list']) or @mkdir($ini_set['list'], 511,true); |
|||
?> |
|||
@ -0,0 +1,13 @@ |
|||
<?php |
|||
header('Content-type:text/html;charset=utf-8'); |
|||
error_reporting(E_ALL & ~E_NOTICE & ~E_WARNING); |
|||
require("shearphoto.config.php"); |
|||
require("shearphoto.up.php"); |
|||
if (!move_uploaded_file($_FILES['UpFile']['tmp_name'], $UpFile['file_url'])) { |
|||
HandleError('后端获取不到文件写入权限。原因:move_uploaded_file()函数-无法写入文件'); |
|||
} |
|||
$UpFile['file_url']=str_replace(array(ShearURL,"\\"),array("","/"),$UpFile['file_url']); |
|||
|
|||
|
|||
echo('{"success":"'.$UpFile['file_url'].'"}'); |
|||
?> |
|||
@ -0,0 +1,76 @@ |
|||
<?php |
|||
class zip_img { |
|||
protected $arg; |
|||
protected $waterimg = false; |
|||
protected $GDfun = false; |
|||
protected $result = array(); |
|||
protected $quality = false; |
|||
final function __construct($arg) { |
|||
$this->arg = $arg; |
|||
if ($arg["force_jpg"]) { |
|||
$this->quality = $arg["quality"]; |
|||
$this->GDfun = array( |
|||
"imagejpeg", |
|||
".jpg" |
|||
); |
|||
} else { |
|||
$this->GDfun = $arg["GdFun"]; |
|||
$this->quality =0; |
|||
} |
|||
if ($arg["water"]) { |
|||
list($W, $H, $type) = @getimagesize($arg["water"]); |
|||
if ($type == 3) { |
|||
$this->waterimg = array( |
|||
imagecreatefrompng($arg["water"]) , |
|||
$W, |
|||
$H |
|||
); |
|||
} |
|||
} |
|||
} |
|||
protected function zip_img($dest, $width, $height, $save_url, $water) { |
|||
$createsrc = imagecreatetruecolor($width, $height); |
|||
imagecopyresampled($createsrc, $dest, 0, 0, 0, 0, $width, $height, $this->arg["w"], $this->arg["h"]); |
|||
$water and $createsrc = $this->add_water($createsrc, $width, $height); |
|||
return $this->saveimg($createsrc, $save_url, $width, $height); |
|||
} |
|||
protected function add_water($src, $width, $height) { |
|||
imagecopy($src, $this->waterimg[0], $width - $this->waterimg[1] - 10, $height - $this->waterimg[2] - 10, 0, 0, $this->waterimg[1], $this->waterimg[2]); |
|||
return $src; |
|||
} |
|||
protected function saveimg($createsrc, $save_url, $width, $height) { |
|||
$save_url.= $this->GDfun[1]; |
|||
$GDW = $this->quality ? @call_user_func($this->GDfun[0], $createsrc, $save_url, $this->quality) : @call_user_func($this->GDfun[0], $createsrc, $save_url); |
|||
imagedestroy($createsrc); |
|||
array_push($this->result, array( |
|||
"ImgUrl" => str_replace(array( |
|||
ShearURL, |
|||
"\\" |
|||
) , array( |
|||
"", |
|||
"/" |
|||
) , $save_url) , |
|||
"ImgName" => basename($save_url) , |
|||
"ImgWidth" => $width, |
|||
"ImgHeight" => $height |
|||
)); |
|||
return $GDW; |
|||
} |
|||
final function __destruct() { |
|||
@imagedestroy($this->arg["dest"]); |
|||
$this->waterimg[0] and @imagedestroy($this->waterimg[0]); |
|||
} |
|||
public function run($this_) { |
|||
$dest = $this->arg["dest"]; |
|||
$zip_array = $this->arg["zip_array"]; |
|||
foreach ($zip_array as $k => $v) { |
|||
list($width, $height, $save_url, $water) = $v; |
|||
if (!$this->zip_img($dest, $width, $height, $save_url, $this->waterimg and $water)) { |
|||
$this_->erro = "后端获取不到文件写入权限。原因:" . $this->GDfun[0] . "()函数-无法写入文件"; |
|||
return false; |
|||
} |
|||
} |
|||
return $this->result; |
|||
} |
|||
} |
|||
?> |
|||
@ -0,0 +1,281 @@ |
|||
/*! |
|||
* Stylesheet for the Date Range Picker, for use with Bootstrap 3.x |
|||
* |
|||
* Copyright 2013 Dan Grossman ( http://www.dangrossman.info ) |
|||
* Licensed under the Apache License v2.0 |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Built for http://www.improvely.com |
|||
*/ |
|||
.clear{ clear:both;} |
|||
.daterangepicker.dropdown-menu { |
|||
max-width: none; |
|||
z-index: 3000; |
|||
} |
|||
|
|||
.daterangepicker.opensleft .ranges, .daterangepicker.opensleft .calendar { |
|||
float: left; |
|||
margin: 4px; |
|||
} |
|||
|
|||
/*.daterangepicker.opensright .ranges, .daterangepicker.opensright .calendar {*/ |
|||
.daterangepicker.opensright .calendar { |
|||
float: right; |
|||
margin: 4px; |
|||
} |
|||
|
|||
.daterangepicker .ranges { |
|||
margin:4px; |
|||
text-align: left; |
|||
padding:0px 20px; |
|||
} |
|||
|
|||
.daterangepicker .ranges .range_inputs>div { |
|||
float: left; |
|||
} |
|||
|
|||
.daterangepicker .ranges .range_inputs>div:nth-child(2) { |
|||
padding-left: 11px; |
|||
} |
|||
|
|||
.daterangepicker .ranges .range_inputs .applyBtn{ |
|||
float:right; |
|||
} |
|||
.daterangepicker .ranges .range_inputs .cancelBtn{ |
|||
float:right;margin-right:10px; |
|||
} |
|||
|
|||
|
|||
.daterangepicker .calendar { |
|||
display: none; |
|||
max-width: 290px; |
|||
} |
|||
|
|||
.daterangepicker.show-calendar .calendar { |
|||
display: block; |
|||
} |
|||
|
|||
.daterangepicker .calendar.single .calendar-date { |
|||
border: none; |
|||
} |
|||
|
|||
.daterangepicker .calendar th, .daterangepicker .calendar td { |
|||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; |
|||
white-space: nowrap; |
|||
text-align: center; |
|||
min-width: 32px; |
|||
} |
|||
|
|||
.daterangepicker .daterangepicker_start_input label, |
|||
.daterangepicker .daterangepicker_end_input label { |
|||
color: #333; |
|||
display: block; |
|||
font-size: 11px; |
|||
font-weight: normal; |
|||
height: 20px; |
|||
line-height: 20px; |
|||
margin-bottom: 2px; |
|||
text-shadow: #fff 1px 1px 0px; |
|||
text-transform: uppercase; |
|||
padding-right:10px; |
|||
float:left; |
|||
height:34px; |
|||
line-height:34px; |
|||
} |
|||
|
|||
.daterangepicker .ranges input { |
|||
font-size: 11px; |
|||
} |
|||
|
|||
.daterangepicker .ranges .input-mini { |
|||
background-color: #eee; |
|||
border: 1px solid #ccc; |
|||
border-radius: 4px; |
|||
color: #555; |
|||
display: block; |
|||
font-size: 11px; |
|||
height: 34px; |
|||
line-height: 34px; |
|||
vertical-align: middle; |
|||
margin: 0 0 10px 0; |
|||
padding: 0 6px; |
|||
width: 84px; |
|||
float:left; |
|||
} |
|||
|
|||
.daterangepicker .ranges ul { |
|||
list-style: none; |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
.daterangepicker .ranges li { |
|||
font-size: 13px; |
|||
background: #f5f5f5; |
|||
border: 1px solid #f5f5f5; |
|||
color: #08c; |
|||
padding: 3px 12px; |
|||
margin-bottom: 8px; |
|||
-webkit-border-radius: 5px; |
|||
-moz-border-radius: 5px; |
|||
border-radius: 5px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.daterangepicker .ranges li.active, .daterangepicker .ranges li:hover { |
|||
background: #08c; |
|||
border: 1px solid #08c; |
|||
color: #fff; |
|||
} |
|||
|
|||
.daterangepicker .calendar-date { |
|||
border: 1px solid #ddd; |
|||
padding: 4px; |
|||
border-radius: 4px; |
|||
background: #fff; |
|||
} |
|||
|
|||
.daterangepicker .calendar-time { |
|||
text-align: center; |
|||
margin: 8px auto 0 auto; |
|||
line-height: 30px; |
|||
} |
|||
|
|||
.daterangepicker { |
|||
position: absolute; |
|||
background: #fff; |
|||
top: 100px; |
|||
left: 20px; |
|||
padding: 4px; |
|||
margin-top: 1px; |
|||
-webkit-border-radius: 4px; |
|||
-moz-border-radius: 4px; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.daterangepicker.opensleft:before { |
|||
position: absolute; |
|||
top: -7px; |
|||
right: 9px; |
|||
display: inline-block; |
|||
border-right: 7px solid transparent; |
|||
border-bottom: 7px solid #ccc; |
|||
border-left: 7px solid transparent; |
|||
border-bottom-color: rgba(0, 0, 0, 0.2); |
|||
content: ''; |
|||
} |
|||
|
|||
.daterangepicker.opensleft:after { |
|||
position: absolute; |
|||
top: -6px; |
|||
right: 10px; |
|||
display: inline-block; |
|||
border-right: 6px solid transparent; |
|||
border-bottom: 6px solid #fff; |
|||
border-left: 6px solid transparent; |
|||
content: ''; |
|||
} |
|||
|
|||
.daterangepicker.opensright:before { |
|||
position: absolute; |
|||
top: -7px; |
|||
left: 9px; |
|||
display: inline-block; |
|||
border-right: 7px solid transparent; |
|||
border-bottom: 7px solid #ccc; |
|||
border-left: 7px solid transparent; |
|||
border-bottom-color: rgba(0, 0, 0, 0.2); |
|||
content: ''; |
|||
} |
|||
|
|||
.daterangepicker.opensright:after { |
|||
position: absolute; |
|||
top: -6px; |
|||
left: 10px; |
|||
display: inline-block; |
|||
border-right: 6px solid transparent; |
|||
border-bottom: 6px solid #fff; |
|||
border-left: 6px solid transparent; |
|||
content: ''; |
|||
} |
|||
|
|||
.daterangepicker table { |
|||
width: 100%; |
|||
margin: 0; |
|||
} |
|||
|
|||
.daterangepicker td, .daterangepicker th { |
|||
text-align: center; |
|||
width: 20px; |
|||
height: 20px; |
|||
-webkit-border-radius: 4px; |
|||
-moz-border-radius: 4px; |
|||
border-radius: 4px; |
|||
cursor: pointer; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.daterangepicker td.off { |
|||
color: #999; |
|||
} |
|||
|
|||
.daterangepicker td.disabled { |
|||
color: #999; |
|||
} |
|||
|
|||
.daterangepicker td.available:hover, .daterangepicker th.available:hover { |
|||
background: #eee; |
|||
} |
|||
|
|||
.daterangepicker td.in-range { |
|||
background: #ebf4f8; |
|||
-webkit-border-radius: 0; |
|||
-moz-border-radius: 0; |
|||
border-radius: 0; |
|||
} |
|||
|
|||
.daterangepicker td.active, .daterangepicker td.active:hover { |
|||
background-color: #357ebd; |
|||
border-color: #3071a9; |
|||
color: #fff; |
|||
} |
|||
|
|||
.daterangepicker td.week, .daterangepicker th.week { |
|||
font-size: 80%; |
|||
color: #ccc; |
|||
} |
|||
|
|||
.daterangepicker select.monthselect, .daterangepicker select.yearselect { |
|||
font-size: 12px; |
|||
padding: 1px; |
|||
height: auto; |
|||
margin: 0; |
|||
cursor: default; |
|||
} |
|||
|
|||
.daterangepicker select.monthselect { |
|||
margin-right: 2%; |
|||
width: 56%; |
|||
} |
|||
|
|||
.daterangepicker select.yearselect { |
|||
width: 40%; |
|||
} |
|||
|
|||
.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.ampmselect { |
|||
width: 50px; |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.daterangepicker_start_input { |
|||
float: left; |
|||
} |
|||
|
|||
.daterangepicker_end_input { |
|||
float: left; |
|||
padding-left: 11px |
|||
} |
|||
|
|||
.daterangepicker th.month { |
|||
width: auto; |
|||
} |
|||
@ -0,0 +1,25 @@ |
|||
目录说明 |
|||
======================== |
|||
|
|||
```bash |
|||
├── Uploader.swf # SWF文件,当使用Flash运行时需要引入。 |
|||
├ |
|||
├── webuploader.js # 完全版本。 |
|||
├── webuploader.min.js # min版本 |
|||
├ |
|||
├── webuploader.flashonly.js # 只有Flash实现的版本。 |
|||
├── webuploader.flashonly.min.js # min版本 |
|||
├ |
|||
├── webuploader.html5only.js # 只有Html5实现的版本。 |
|||
├── webuploader.html5only.min.js # min版本 |
|||
├ |
|||
├── webuploader.noimage.js # 去除图片处理的版本,包括HTML5和FLASH. |
|||
├── webuploader.noimage.min.js # min版本 |
|||
├ |
|||
├── webuploader.custom.js # 自定义打包方案,请查看 Gruntfile.js,满足移动端使用。 |
|||
└── webuploader.custom.min.js # min版本 |
|||
``` |
|||
|
|||
## 示例 |
|||
|
|||
请把整个 Git 包下载下来放在 php 服务器下,因为默认提供的文件接受是用 php 编写的,打开 examples 页面便能查看示例效果。 |
|||
@ -0,0 +1,28 @@ |
|||
.webuploader-container { |
|||
position: relative; |
|||
} |
|||
.webuploader-element-invisible { |
|||
position: absolute !important; |
|||
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ |
|||
clip: rect(1px,1px,1px,1px); |
|||
} |
|||
.webuploader-pick { |
|||
position: relative; |
|||
display: inline-block; |
|||
cursor: pointer; |
|||
background: #00b7ee; |
|||
padding: 10px 15px; |
|||
color: #fff; |
|||
text-align: center; |
|||
border-radius: 3px; |
|||
overflow: hidden; |
|||
} |
|||
.webuploader-pick-hover { |
|||
background: #00a2d4; |
|||
} |
|||
|
|||
.webuploader-pick-disable { |
|||
opacity: 0.6; |
|||
pointer-events:none; |
|||
} |
|||
|
|||
@ -0,0 +1,33 @@ |
|||
<?php $config=config('view_replace_str');?> |
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|||
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
|||
|
|||
<title>{:lang('error')}</title> |
|||
<link type="text/css" rel="stylesheet" href="<?php echo $config['__PUBLIC__']; ?>jump_style/base.css"> |
|||
<link type="text/css" rel="stylesheet" href="<?php echo $config['__PUBLIC__']; ?>jump_style/global.css"> |
|||
<link type="text/css" rel="stylesheet" href="<?php echo $config['__PUBLIC__']; ?>jump_style/404.css"> |
|||
</head> |
|||
<body> |
|||
<div class="wrap"> |
|||
<div class="errors"> |
|||
<div class="text"> |
|||
<h4>{:lang('reason')}</h4> |
|||
<h4><?php echo (is_array($msg))?implode("|",$msg):$msg;; ?>!</h4> |
|||
<p>SZCAEE:{:lang('automatically')} <a id="href" href="<?php echo($url); ?>">{:lang('jump')}</a> {:lang('wait second')} <b id="wait"><?php echo($wait); ?></b></p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<script type="text/javascript"> |
|||
(function(){ |
|||
var wait = document.getElementById('wait'),href = document.getElementById('href').href; |
|||
var interval = setInterval(function(){ |
|||
var time = --wait.innerHTML; |
|||
if(time <= 0) { |
|||
location.href = href; |
|||
clearInterval(interval); |
|||
}; |
|||
}, 1000); |
|||
})(); |
|||
</script> |
|||
</body></html> |
|||
@ -0,0 +1,34 @@ |
|||
<!doctype html> |
|||
<html> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<title>访问错误--页面跳转中...</title> |
|||
<head> |
|||
<meta http-equiv=content-type content="text/html; charset=utf-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<link href="/public/jump_style/css/style.css" type="text/css" rel="stylesheet"> |
|||
<meta http-equiv="refresh" content="500;url=#"> |
|||
</head> |
|||
<body> |
|||
<div class="container"> |
|||
<div class="container_3_3"><span>{:config('sys_name')}</span></div> |
|||
<div class="container_1"><img src="/public/jump_style/images/404.png"></div> |
|||
<div class="container_2"><img src="/public/jump_style/images/3.22.gif" ></div> |
|||
<div class="container_3"> |
|||
<div class="container_3_1"><span>SORRY,你要访问的页面弄丢了</span></div> |
|||
<div class="container_3_2"><span>你可以通过以下方式重新访问......</span></div> |
|||
</div> |
|||
</div> |
|||
<div class="maincolumn"> |
|||
<div class="maincolumn_bg"> |
|||
<ul> |
|||
<li class="index"><a href="{:url('home/Index/index')}">返回首页</a></li> |
|||
<li class="about"><a href="{:url('home/Listn/index',['id'=>18]')}">关于我们</a></li> |
|||
<li class="contact"><a href="{:url('home/Listn/contact')}">联系我们</a></li> |
|||
</ul> |
|||
</div> |
|||
<div></div> |
|||
</div> |
|||
</div> |
|||
</body> |
|||
</html> |
|||