-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
100 lines (79 loc) · 3.55 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<title>鲁虺在线图片水印打码工具</title>
<style>
#container {
max-width: 500px;
margin: 30px auto;
}
h1 { margin: 0 }
p, article { margin: 0 0 20px 0 }
article { font-size: 14px; color: #777 }
label { color: blue; font-size: 17px }
p label { color: black; display: inline-block; width: 50px; font-size: 15px }
p { font-size: 15px; line-height: 30px }
input#text { width: 100%; box-sizing: border-box; font-size: 16px; margin-bottom: 10px }
input[type=range] { width: 200px; height: 18px; vertical-align: text-bottom }
canvas { box-sizing: border-box; width: 100%; border: 1px dashed #AAA; cursor: pointer }
</style>
</head>
<div id="container">
<h1>鲁虺在线图片水印打码工具</h1>
<article>安全地为你的图片加水印，无任何网络请求，特别适合各种敏感证件（身份证，驾照，护照等）。<a href="http://github.com/kugeceo">Github地址</a></article>
<label for="image">第一步：先选择一张本地图片</label>
<p><input type="file" id="image" autocomplete="off"></p>
<label for="text">第二步：输入需要打水印的文字</label>
<p><input type="text" id="text" placeholder="请输入文字" autocomplete="off" maxlength="30">
<label for="color">颜色</label>
<input type="color" id="color" pattern="#[0-9A-Fa-f]{6}" autocomplete="off" value="#0000FF"><br>
<label for="alpha">透明度</label>
<input type="range" id="alpha" min="0" max="1" step="0.05" autocomplete="off" value="0.15"><br>
<label for="space">间隔</label>
<input type="range" id="space" min="1" max="8" step="0.2" autocomplete="off" value="4"><br>
<label for="size">字号</label>
<input type="range" id="size" min="0.5" max="3" step="0.05" autocomplete="off" value="1">
</p>
<label for="text">第三步：点击图片下载</label>
<p id="graph"></p>
</div>
<script src="./build/script.js"></script>
<!--百度自动推送代码-->
<script>
(function(){
var bp = document.createElement('script');
bp.src = '//push.zhanzhang.baidu.com/push.js';
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
<!--百度自动推送代码-->
<!-- 网址安全插件开始 -->
<script type="text/javascript">
var _svq_ = _svq_ || [];
_svq_.push(['set_api_key', '16adflfafads9gf28327005056b68c3d']);
_svq_.push(['set_noicon_class', '']); //链接前不显示任何图标，如果需要显示，请去掉这句
_svq_.push(['set_nopopup_class', '-sv-no-popup']);
_svq_.push(['check_page']);
(function(){
var aq = document.createElement('script');
aq.type = 'text/javascript';
aq.async = true;
aq.charset = 'utf-8';
aq.src = 'http://openapi.anquan.org/static/aq.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(aq, s);
})();
</script>
<!-- 网址安全插件结束 -->
<div style="display:none">
<script src="http://s11.cnzz.com/z_stat.php?id=610720&web_id=610720" language="JavaScript"></script>
</div>
<div class="copyright pr" style="text-align: center; margin-left: 0px;">
<p>
Copyright 2004-01-11 luhui.net all rights reserved.
</p>
</div>
</html>