现在很多网站都有通过扫二维码用手机连接的功能，联图网(http://www.liantu.com/pingtai/)的二维码开放平台开放了一个生成二维码图片的Api,挺方便使用的。闲着无聊，写了个前台快速生成二维码的方法。
html代码如下:(二维码将生成在这div下)
|
1
|
<
div
id
=
'qrcode'
></
div
>
|
js代码如下：
|
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
|
var
qrCode = {
//初始化属性
jsonData:{
content :
''
,
//内容，可为utl,如html://www.baidu.com 或文字，图片信息之类的
logo :
''
,
//二维码中间显示图片， 如:html://wwww.xxx.com/imgname.jpg
bgColor :
''
,
//背景颜色， 格式 ：颜色代码 如fffaf0
fgColor :
''
,
//前景颜色，即条纹颜色 格式 ：同上
gcColor :
''
,
//渐变颜色, 格式 : 同上
ptColor :
''
,
//定位点颜色(外框) 格式：同上
inptColor :
''
,
//定位点颜色(内点) 格式：同上
eLevel :
''
,
//纠错等级, 可用值:h\q\m\l 格式 : 单个字符 如 h
w :
''
,
//宽度尺寸 格式：像素值 如 200
m :
''
//外边距尺寸 格式：如上
},
//获取二维码图片
getQrcode:
function
(divId){
//javascript写法
var
divElement = document.getElementById(divId),
imgHtml =
this
.setImgHeml(
this
.jsonData);
divElement.innerHTML = imgHtml;
/* //jQuery写法
var imgHtml = this.setImgHeml(this.jsonData);
$("#"+divId).append(imgHtml);*/
},
//构造图片
setImgHeml:
function
(jsonData){
var
imgHtml =
"<img src='http://qr.liantu.com/api.php?"
;
imgHtml += jsonData.content?
"&text="
+jsonData.content:
""
;
imgHtml += jsonData.logo?
"&logo="
+jsonData.logo:
""
;
imgHtml += jsonData.bgColor?
"&bg="
+jsonData.bgColor:
""
;
imgHtml += jsonData.fgColor?
"&fg="
+jsonData.fgColor:
""
;
imgHtml += jsonData.gcColor?
"&gc="
+jsonData.gcColor:
""
;
imgHtml += jsonData.ptColor?
"&pg="
+jsonData.ptColor:
""
;
imgHtml += jsonData.inptColor?
"&inpt="
+jsonData.inptColor:
""
;
imgHtml += jsonData.eLevel?
"&el="
+jsonData.eLevel:
""
;
imgHtml += jsonData.w?
"&w="
+jsonData.w:
""
;
imgHtml += jsonData.m?
"&m="
+jsonData.m:
""
;
imgHtml +=
"'>"
;
return
imgHtml;
}
};
|
调用很简单，只需要通过设置qrCode的jsonData中你需要的属性就可以了，不需要可以不设置
|
1
2
3
4
5
6
7
8
|
//设置内容为当前url路径
qrCode.jsonData.content = window.location.href;
//设置宽度尺寸
qrCode.jsonData.w = 500;
//设置外边框距
qrCode.jsonData.m = 50;
//在id为qrcode的元素下生成二维码图片
qrCode.getQrcode(
'qrcode'
);
|
通过这几行设置代码，就可以轻松地生成二维码了。