forked from davidshimjs/qrcodejs
-
Notifications
You must be signed in to change notification settings - Fork 28
/
demo.html
69 lines (69 loc) · 1.7 KB
/
demo.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<script src="qrcode.js"></script>
<style>
/*! 外边框通过CSS设置样式 */
#qrcode {
border: 10px dashed red;
border-radius: 10px;
width: 300px;
height: 300px;
}
</style>
<script>
window.onload=()=>{
// 简单方式
//var q1 = new QRCode(document.getElementById('qrcode'), 'your content');
// 设置参数方式
var qrcode = new QRCode('qrcode', {
//二维码内容
text: 'your content',
//二维码宽度
width: 125,
//二维码高度
height: 125,
//二维码前景色
colorDark : '#000000',
//二维码背景色
colorLight : "#fff",
/*!
容错级别，可设置为：
QRCode.CorrectLevel.L
QRCode.CorrectLevel.M
QRCode.CorrectLevel.Q
QRCode.CorrectLevel.H
*/
correctLevel : QRCode.CorrectLevel.L,
//二维码中心图片
iconSrc: "http://www.365mini.com/static/image/cry.gif",
//二维码中心图片边框弧度
iconRadius: 10,
//二维码中心图片边框宽度
iconBorderWidth: 5,
//二维码中心图片边框颜色
iconBorderColor: "red",
//外围幕布（或画布）的宽度
curtainWidth: 300,
//外围幕布（或画布）的高度
curtainHeight: 300,
//外围幕布（或画布）图片(图片可以使用透明或不透明的)
curtainImg: "qrcode_border.png",
//外围幕布（或画布）底色(底色和图片同时设置时，显示底色)
//curtainBgColor: "Wheat",
//二维码相对外围幕布（或画布）的X偏移
qrcodeOffsetX: 88,
//二维码相对外围幕布（或画布）的Y偏移
qrcodeOffsetY: 108,
});
//清空原先的图像，重新做一张
//qrcode.clear();
//qrcode.makeCode('new content');
}
</script>
</head>
<body>
<div id="qrcode"></div>
</body>
</html>