server.html
4.24 KB
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
<!doctype html>
<html lang="zh-cn">
<meta name="viewport" content="width=device-width, user-scalable=no">
<head>
<meta charset="UTF-8">
<title>lrz4 demo&test</title>
<link rel="stylesheet" href="../lib/bootstrap/3.3.5/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css">
<style>
.css-gram{
width: 100%;
}
img {
width: 100%;
max-width: 320px;
padding: 10px 15px;
}
.tip {
position: relative;
top: 15px;
right: 10px;
}
</style>
</head>
<body>
<div class="navbar navbar-default">
<div class="pull-right tip text-muted">遇到问题时请截图到 <a
href="https://github.com/think2011/localResizeIMG/issues">issues</a>
</div>
<div class="container">
<div class="navbar-header">
<a href="./" class="navbar-brand">Lrz4 </a>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<h3 style="margin-top: 0;">上传图片测试</h3>
<small><a href="index.html">切换至无服务端演示</a></small>
<div>
<progress value="0" max="100"></progress>
</div>
<small class="text-muted">配置：宽度不超过800，高度适应，70%压缩率</small>
<br/>
<small class="text-muted">演示服务端是跨域上传且免费的,所以较慢,请耐心等待..</small>
<br/>
<small class="text-muted UA">UA</small>
<hr/>
</div>
<div id="upload-container" class="col-xs-12 text-center">
<input accept="image/*" type="file"/>
</div>
<div class="col-xs-12 text-center">
<h3>图片样式</h3>
<small class="text-muted">选择一个预设的CSSgram的样式</small>
<div>
<select id="filter">
<option>aden</option>
<option>reyes</option>
<option>perpetua</option>
<option>inkwell</option>
<option>toaster</option>
<option>walden</option>
<option>hudson</option>
<option>gingham</option>
<option>mayfair</option>
<option>lofi</option>
<option>xpro2</option>
<option>_1977</option>
<option>brooklyn</option>
<option>nashville</option>
<option>lark</option>
<option>moon</option>
<option>clarendon</option>
<option>willow</option>
</select>
</div>
</div>
<div class="col-xs-12 text-center">
<hr/>
<h3>旋转方向测试</h3>
<small class="text-muted">看到的图像应该全是一个方向的，没见到图片是出问题了</small>
<hr/>
</div>
<div class="col-xs-6 text-center">
<img data-src="img/orientation_1.JPG?v=49ec2ec"
src="http://placehold.it/1x1" alt="点击载入"/>
<p>方向为【1】的图片</p>
</div>
<div class="col-xs-6 text-center">
<img data-src="img/orientation_3.JPG?v=c393d29"
src="http://placehold.it/1x1" alt="点击载入"/>
<p>方向为【3】的图片</p>
</div>
<div class="col-xs-6 text-center">
<img data-src="img/orientation_6.JPG?v=cd9d967"
src="http://placehold.it/1x1" alt="点击载入"/>
<p>方向为【6】的图片</p>
</div>
<div class="col-xs-6 text-center">
<img data-src="img/orientation_8.JPG?v=619646c"
src="http://placehold.it/1x1" alt="点击载入"/>
<p>方向为【8】的图片</p>
</div>
</div>
</div>
<footer class="text-center">
<hr/>
<p class="text-muted"><a href="https://github.com/think2011/localResizeIMG">
localResizeIMG(<span id="version"></span>版) by think2011</a>
</p>
</footer>
<script src="../lib/lrz/lrz.bundle.js"></script>
<script src="./server.js"></script>
</body>
</html>