-
Notifications
You must be signed in to change notification settings - Fork 41
/
index.html
244 lines (224 loc) · 16.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset=utf-8 />
<meta name="renderer" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=8,9,10">
<title>ShearPhoto2.2正式版_支持HTML5头像截取工具_JS截图_切图插件_数码照片压缩截图插件_商品图片编辑_在线拍照截图</title>
<link href="shearphoto_common/css/ShearPhoto.css" rel="stylesheet" type="text/css" media="all"><!--CSS文件，有点废话-->
<script type="text/javascript" src="shearphoto_common/js/ShearPhoto.js" ></script><!--ShearPhoto的核心文件 截取，拖拽，HTML5切图，数据交互等都是由这个文件处理，全部由明哥先生汗水交织而成-->
<script type="text/javascript" src="shearphoto_common/js/webcam_ShearPhoto.js" ></script> <!--在线拍照那个FLASH的接口，非技术性文件-->
<script type="text/javascript" src="shearphoto_common/js/alloyimage.js" ></script> <!--图片特效处理,他只负责特效，其他功能与这个文件完全无关，这个JS从腾讯AI文件 如你不要特效的话，顺带删除这个文件，在hendle.js设置关闭特效-->
<script type="text/javascript" src="shearphoto_common/js/handle.js" ></script> <!--设置和处理对象方法的JS文件，要修改设置，请进入这个文件-->
</head>
<body>
<!--ShearPhoto2.2 免费，开源，兼容目前所有浏览器，纯原生JS和PHP编写
从shearphoto 1.5直接跳跃到shearphoto 2.0，这是shearphoto重大革新。本来我是想shearphoto 1.6 、1.7、 1.8 慢慢升的，但是这样升级只会让shearphoto慢慢走向灭亡！
结果我又辛苦了一个多星期，把shearphoto 2.0升级完成！
shearphoto2.0之前，我认为没必要加入HTML5，兼容IE6 7 8就够。但是直到后来！我知道这是我一个错误的决定
因为用户并没有为shearphoto 1.5埋单，原因shearphoto 1.5没有采用HTML5截取，用户觉得会增加服务器负载！而且又不是本地加载图片！我一个错误的决定！导致用户份额一直没有明显大增。
shearphoto 2.0是收集所有用户的意见开发而成的！
重大的特性就是全面支持HTML5
1：支持translate3d 硬件加速移动
2：加入图片预览功能
3：加入了压缩数码相机图片， 以及HTML5 canvas本地切图,截图
但依然继续支持IE6 7 8 哦！有人问IE6 7 8不兼容HTML5啊，你骗人吗？
先不要急！shearphoto 2.0的机制是这样的：有HTML5则使用HTML5 canvas切图，截图，JS先会截取一张最合理化的截图，然后交给后端，根据用户设置，进行压缩截图
没有HTML5的浏览器则采用先上传再截取的策略，就是原先1.5的策略。
当然有些用户如果不喜欢HTML5，也可以根据接口自行关闭
4：加HTML5图片特效，就一如美图秀秀这样的特效！shearphoto一共提供14种漂亮特效，感谢腾讯AI对图片特效提供支持
shearphoto 2.0增添很多接口，大部份是HTML5的设置！请下载源码体验
shearphoto外忧内患，已经没退路了。在WEB截图界，shearphoto必须要干个第一！.shearphoto不再局限于头像截取，shearphoto更可用于商城的商品图片编辑。
shearphoto含HTML5图片压缩功能！一张十M 二十M的图，照样能帮你压成你要的容量和尺寸，
一般情况下！商城的商品图片都是通过数码相机拍摄后，要用PHOTOshop把数码相机内几十M的图片，压缩，截取，然后才能上传到商城服务器！
这样的操作是不是太麻烦了！ 如果你使用shearphoto你就快捷很多了，shearphoto你只需要直接选择图片，就会帮你进行压缩截取，上传，添加到数据库。这样的一条龙服务！
shearphoto 2.0的机制是无可挑剔的！但是不排除有BUG存在，如果用户遇到BUG情况，请到论坛 或官方QQ群进行反馈，我会第一时间发布补丁！
shearphoto支持PHP和JAVA，JAVA由网友所写，但是JAVA版并不是太完善，使用的是以前的shearphoto1.3！我 一直很想把NET python nodejs JAVA的很完善地做出来！
可惜个人能力有限，如果你喜欢shearphoto，你又会玩 NET python nodejs JAVA，又想为互联网做贡献，那么你可以加入shearphoto团队，把这些后端版本做出来。但shearphoto没有薪水给你！
shearphoto免费开源的，没有利润可图，纯粹是抱着为互联网做贡献的心态！如果你跟我一样，请加入到shearphoto后端开发
浏览器支持：
兼容IE 6 及以上的所有浏览器
后端支持：
支持PHP5.X 至 PHP7.0或以上
支持JAVA后端（shearphoto1.3开发）
系统支持：
支持linux WINDOW服务器
shearphoto采用原生JS面向对象 + 原生PHP面向对象开发，绝对不含JQ插件，对JQ情有独忠的，这个插件不合适你
*******************************ShearPhoto2.2 免费，开源，兼容目前所有浏览器，纯原生JS和PHP编写-->
<!--头部-->
<div class="header">
<img src="shearphoto_common/images/logo.png" alt="ShearPhoto官方网站：www.shearphoto.com" title="ShearPhoto官方网站：www.shearphoto.com">
<a href="http://www.shearphoto.com/bbs" title="shearphoto官方论坛">进入官方论坛</a>
<strong>
ShearPhoto 作者：明哥先生 QQ399195513-兼容所有浏览器，乞今最好的切图，HTML5截图工具！
</strong>
</div>
<!--头部-->
<!--主功能部份 主功能部份的标签请勿随意删除，除非你对shearphoto的原理了如指掌，否则JS找不到DOM对象，会给你抱出错误-->
<div id="shearphoto_loading">程序加载中......</div><!--这是2.2版本加入的缓冲效果，JS方法加载前显示的等待效果-->
<div id="shearphoto_main">
<!--效果开始.............如果你不要特效，可以直接删了........-->
<div class="Effects" id="shearphoto_Effects" autocomplete="off">
<strong class="EffectsStrong">截图效果</strong>
<a href="javascript:;" StrEvent="原图" class="Aclick"><img src="shearphoto_common/images/Effects/e0.jpg"/>原图</a>
<a href="javascript:;" StrEvent="美肤"><img src="shearphoto_common/images/Effects/e1.jpg"/>美肤效果</a>
<a href="javascript:;" StrEvent="素描"><img src="shearphoto_common/images/Effects/e2.jpg"/>素描效果</a>
<a href="javascript:;" StrEvent="自然增强"><img src="shearphoto_common/images/Effects/e3.jpg" />自然增强</a>
<a href="javascript:;" StrEvent="紫调"><img src="shearphoto_common/images/Effects/e4.jpg" />紫调效果</a>
<a href="javascript:;" StrEvent="柔焦"><img src="shearphoto_common/images/Effects/e5.jpg"/>柔焦效果</a>
<a href="javascript:;" StrEvent="复古"><img src="shearphoto_common/images/Effects/e6.jpg"/>复古效果</a>
<a href="javascript:;" StrEvent="黑白"><img src="shearphoto_common/images/Effects/e7.jpg"/>黑白效果</a>
<a href="javascript:;" StrEvent="仿lomo"><img src="shearphoto_common/images/Effects/e8.jpg"/>仿lomo</a>
<a href="javascript:;" StrEvent="亮白增强"><img src="shearphoto_common/images/Effects/e9.jpg"/>亮白增强</a>
<a href="javascript:;" StrEvent="灰白"><img src="shearphoto_common/images/Effects/e10.jpg"/>灰白效果</a>
<a href="javascript:;" StrEvent="灰色"><img src="shearphoto_common/images/Effects/e11.jpg"/>灰色效果</a>
<a href="javascript:;" StrEvent="暖秋"><img src="shearphoto_common/images/Effects/e12.jpg"/>暖秋效果</a>
<a href="javascript:;" StrEvent="木雕"><img src="shearphoto_common/images/Effects/e13.jpg"/>木雕效果</a>
<a href="javascript:;" StrEvent="粗糙"><img src="shearphoto_common/images/Effects/e14.jpg"/>粗糙效果</a>
</div>
<!--效果结束...........................如果你不要特效，可以直接删了.....................................................-->
<!--primary范围开始-->
<div class="primary">
<!--main范围开始-->
<div id="main">
<div class="point">
</div>
<!--选择加载图片方式开始-->
<div id="SelectBox">
<form id="ShearPhotoForm" enctype="multipart/form-data" method="post" target="POSTiframe">
<input name="shearphoto" type="hidden" value="我要传参数" autocomplete="off"> <!--示例传参数到服务端，后端文件UPLOAD.php用$_POST['shearphoto']接收,注意：HTML5切图时，这个参数是不会传的-->
<a href="javascript:;" id="selectImage"><input type="file" name="UpFile" autocomplete="off"/></a>
</form>
<a href="javascript:;" id="PhotoLoading"></a>
<a href="javascript:;" id="camerasImage"></a>
</div>
<!--选择加载图片方式结束--->
<div id="relat">
<div id="black">
</div>
<div id="movebox">
<div id="smallbox">
<img src="shearphoto_common/images/default.gif" class="MoveImg" /><!--截框上的小图-->
</div>
<!--动态边框开始-->
<i id="borderTop">
</i>
<i id="borderLeft">
</i>
<i id="borderRight">
</i>
<i id="borderBottom">
</i>
<!--动态边框结束-->
<i id="BottomRight">
</i>
<i id="TopRight">
</i>
<i id="Bottomleft">
</i>
<i id="Topleft">
</i>
<i id="Topmiddle">
</i>
<i id="leftmiddle">
</i>
<i id="Rightmiddle">
</i>
<i id="Bottommiddle">
</i>
</div>
<img src="shearphoto_common/images/default.gif" class="BigImg" /><!--MAIN上的大图-->
</div>
</div>
<!--main范围结束-->
<div style="clear: both"></div>
<!--工具条开始-->
<div id="Shearbar">
<a id="LeftRotate" href="javascript:;">
<em>
</em>
向左旋转
</a>
<em class="hint L">
</em>
<div class="ZoomDist" id="ZoomDist">
<div id="Zoomcentre">
</div>
<div id="ZoomBar">
</div>
<span class="progress">
</span>
</div>
<em class="hint R">
</em>
<a id="RightRotate" href="javascript:;">
向右旋转
<em>
</em>
</a>
<p class="Psava">
<a id="againIMG" href="javascript:;">重新选择</a>
<a id="saveShear" href="javascript:;">保存截图</a>
</p>
</div>
<!--工具条结束-->
</div>
<!--primary范围结束-->
<div style="clear: both"></div>
</div>
<!--shearphoto_main范围结束-->
<!--主功能部份 主功能部份的标签请勿随意删除，除非你对shearphoto的原理了如指掌，否则JS找不到DOM对象，会给你抱出错误-->
<!--相册-->
<div id="photoalbum"><!--假如你不要这个相册功能。把相册标签删除了，JS会抱出一个console.log()给你，注意查收，console.log的内容是告诉，某个DOM对象找不到-->
<h1>假如：这是一个相册--------试试点击图片</h1>
<i id="close"></i>
<ul>
<li><img src="shearphoto_common/file/photo/1.jpg" serveUrl="file/photo/1.jpg" /></li> <!--serveUrl 是对于服务器路径而言，一般不需要改动，如果index.html位置改变时，你只需要改动 src就可以-->
<li><img src="shearphoto_common/file/photo/2.jpg" serveUrl="file/photo/2.jpg" /></li> <!--serveUrl 是对于服务器路径而言，一般不需要改动，如果index.html位置改变时，你只需要改动 src就可以-->
<li><img src="shearphoto_common/file/photo/3.jpg" serveUrl="file/photo/3.jpg" /></li> <!--serveUrl 是对于服务器路径而言，一般不需要改动，如果index.html位置改变时，你只需要改动 src就可以-->
<li><img src="shearphoto_common/file/photo/4.jpg" serveUrl="file/photo/4.jpg" /></li> <!--serveUrl 是对于服务器路径而言，一般不需要改动，如果index.html位置改变时，你只需要改动 src就可以-->
<li><img src="shearphoto_common/file/photo/5.jpg" serveUrl="file/photo/5.jpg" /></li> <!--serveUrl 是对于服务器路径而言，一般不需要改动，如果index.html位置改变时，你只需要改动 src就可以-->
<li><img src="shearphoto_common/file/photo/6.jpg" serveUrl="file/photo/6.jpg" /></li> <!--serveUrl 是对于服务器路径而言，一般不需要改动，如果index.html位置改变时，你只需要改动 src就可以-->
<li><img src="shearphoto_common/file/photo/7.jpg" serveUrl="file/photo/7.jpg" /></li> <!--serveUrl 是对于服务器路径而言，一般不需要改动，如果index.html位置改变时，你只需要改动 src就可以-->
<li><img src="shearphoto_common/file/photo/8.jpg" serveUrl="file/photo/8.jpg" /></li><!--serveUrl 是对于服务器路径而言，一般不需要改动，如果index.html位置改变时，你只需要改动 src就可以-->
</ul>
</div>
<!--相册-->
<!--拍照-->
<div id="CamBox"><!--假如你不要这个拍照功能。把拍照标签删除了，JS会抱出一个console.log()给你，注意查收，console.log的内容是告诉，某个DOM对象找不到-->
<p class="lens"></p>
<div id="CamFlash"></div>
<p class="cambar">
<a href="javascript:;" id="CamOk" >拍照</a>
<a href="javascript:;" id="setCam">设置</a>
<a href="javascript:;" id="camClose">关闭</a>
<span style="clear:both;"></span>
</p>
<div id="timing"></div>
</div>
<!--拍照-->
<!--底部 尽可能地保留作者肖像不要删，作者的肖像一如天安门毛泽东头一样神圣，请你保留着-->
<div class="bottom">
ShearPhoto作者：
<span><img src="shearphoto_common/images/Author.png" title="这是shearphoto作者肖像，请你保留，不要删除" /> </span> 明哥先生 QQ399195513 | ShearPhoto兼容目前所有浏览器 | ShearPhoto官方网站：
<a href="http://www.shearphoto.com" >www.shearphoto.com</a> | 官方QQ群：461550716
<br /> Copyright © 2015 明哥先生. All Rights Reserved
<!--作者统计使用量，你可以删走 -->
<script language="javascript" type="text/javascript" src="http://js.users.51.la/18250727.js"></script>
<noscript><a href="http://www.51.la/?18250727" target="_blank"><img alt="我要啦免费统计" src="http://img.users.51.la/18250727.asp" style="border:none" /></a></noscript>
<!--作者统计使用量，你可以删走 -->
</div>
<!--底部 尽可能地保留作者肖像不要删-->
<!--这里可以删走，纯粹给文盲看的-->
<script>
if(window.location.host ==="")//没有域名，肯定是SB直接点开index.html
{
document.body.innerHTML=""; //清除那些SB的页面，不让他看
alert("有病是吧！\n\n你直接点开index.html，程序是不可用的。我已经说过无数遍。\n\n必须要后端环境，后端环境！什么叫后端环境，PHP，JAVA等等后端环境！清楚了吗？\n\n2.0版本之前的事，那次一个SB加我QQ，第一句就说：为什么shearphoto用不了，我就问：\"你有乱改过里面代码吗？\",他说：\"没有\"。我就说怪了，有什么可能！我叫他发浏览器URL地址看下，我看到是这种地址:d:\\xxxx\\shearphoto\\index.html! 我当时很生气！我还是忍住，我说要用http(s)打开的。\"他就来一句：\"别人的JS都能直接点开就能用的，shearphoto是垃圾\"我忍不住跟上一句：\"靠你个妈，给我滚\"");
//给SB弹出提示，让他改过自身！摆脱文盲
window.close();//关了SB的页面
}
</script>
<!--这里可以删走，纯粹给文盲看的-->
</body>
</html>