forked from wangyiwy/oktools
-
Notifications
You must be signed in to change notification settings - Fork 0
/
qrcode.html
152 lines (143 loc) · 5.89 KB
/
qrcode.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
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>二维码制作 - 在线工具 - OKTools</title>
<meta name="keywords" content="二维码,二维码制作,二维码生成,二维码图片">
<meta name="description" content="在线二维码制作工具,二维码制作,二维码生成,二维码图片">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="/static/css/style.css" type="text/css">
<style>
.select {
flex-shrink: 1;
width: 100%;
}
.options {
width: 200px;
margin: 0 24px;
}
#input_size {
max-width: 111px;
}
.image {
width: 280px;
height: 280px;
background-color: #f3f3f3;
clear: both;
display: block;
margin: auto;
}
</style>
</head>
<body>
{{template "aside"}}
<main>
<div class="container">
<h1>二维码制作</h1>
<div class="flex mt-2" style="justify-content: flex-end;">
<div style="flex-grow: 1">
<div class="control">
<textarea id="area_text" class="textarea fixed-size" rows="10" maxlength="200"
onfocusin="onInputText(this)" placeholder="二维码内容"
onpaste="setTimeout(generate, 1)"></textarea>
<p id="text_help" class="help text-info">字数越多，越不易扫描</p>
</div>
</div>
<div class="options">
<div class="group fullwidth">
<span class="static">尺寸(px)</span>
<input id="input_size" class="input" type="number" value="280"
oninput="if(value>1000)value=1000">
</div>
<div class="group fullwidth mt-2">
<span class="static">纠错等级</span>
<select id="select_level" class="select">
<option value="2">H : 高</option>
<option value="3" selected>Q : 中等</option>
<option value="0">M : 低</option>
<option value="1">L : 最低</option>
</select>
</div>
<div class="group fullwidth mt-2">
<span class="static">背景颜色</span>
<input id="input_bg" class="input" type="color" value="#ffffff">
</div>
<div class="group fullwidth mt-2">
<span class="static">前景颜色</span>
<input id="input_fg" class="input" type="color" value="#000000">
</div>
<button class="button primary fullwidth mt-2" onclick="generate()">生成二维码</button>
</div>
<div>
<figure id="img_qrcode" class="image"></figure>
<button class="button fullwidth mt-2" onclick="save()">保存图片</button>
</div>
</div>
<div class="content mt-2">
<h2>二维码原理</h2>
<p>二维条码/二维码可以分为堆叠式/行排式二维条码和矩阵式二维条码。
堆叠式/行排式二维条码形态上是由多行短截的一维5条码堆叠而成；
矩阵式二维条码以矩阵的形式组成，在矩阵相应元素位置上用“点”表示二进制“1”，
用“空”表示二进制“0”，“点”和“空”的排列组成代码。</p>
<h2>数据表示方法</h2>
<p>深色模块表示二进制“1”，浅色模块表示二进制“0”。</p>
<h2>纠错能力</h2>
<ul>
<li>level L : 约可纠错7%的数据码字</li>
<li>level M : 约可纠错15%的数据码字</li>
<li>level Q : 约可纠错25%的数据码字</li>
<li>level H : 约可纠错30%的数据码字</li>
</ul>
</div>
</div>
</main>
<script src="../static/js/qrcode.min.js"></script>
<script>
let img_qrcode = document.getElementById('img_qrcode');
function generate() {
img_qrcode.innerHTML = '';
img_qrcode.style.visibility = 'hidden';
let area_text = document.getElementById('area_text');
if (!area_text.value) {
area_text.classList.add('error');
return
}
let size = parseInt(document.getElementById('input_size').value);
if (size <= 0 || size > 1000) {
return;
}
try {
new QRCode(img_qrcode, {
text: area_text.value,
width: size,
height: size,
colorDark: document.getElementById('input_fg').value,
colorLight: document.getElementById('input_bg').value,
correctLevel: parseInt(document.getElementById('select_level').value)
});
setTimeout(() => img_qrcode.style.visibility = 'visible');
} catch (e) {
document.getElementById('area_text').classList.add('error');
let text_help = document.getElementById('text_help');
text_help.classList.add('text-error');
text_help.innerText = '内容过多'
}
}
function onInputText(e) {
e.classList.remove('error');
let text_help = document.getElementById('text_help');
text_help.classList.remove('text-error');
text_help.innerText = '字数越多，越不易扫描';
}
function save() {
let img = img_qrcode.getElementsByTagName('img')[0];
let url = img.src;
let a = document.createElement('a');
let event = new MouseEvent('click');
a.download = 'qrcode_' + Math.round(new Date() / 1000);
a.href = url;
a.dispatchEvent(event)
}
</script>
</body>
</html>