工作中需要一个简单的二维码生成功能,此处运用JQuery+jquery.qrcode实现;
需要资源:jquery.js + jquery.qrcode.min.js (网上搜索即可获取)
准备工作
页面设计代码:
需要创建一个div存放生成二维码,其中id命名为qrcode的div不可缺少。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--此处为显示二维码的div-->
<div style="width: 100%;height: 350px;text-align: center">
<div id="qrcode" style="width: 100%;height: 350px;background-repeat: no-repeat;text-align: center">
</div>
</div>
<input type="button" value="运行生成二维码" onclick="creatQrcode()"/>
</body>
</html>
引入资源
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/jquery.qrcode.min.js" ></script>
注:必须先引入jquery再引入qrcode
准备工作完成,开始生成。
非中文生成二维码
function creatQrcode(){
var qr=$("#qrcode").qrcode({
render: "canvas",//渲染方式,只是canvas、table
text: "csdn yyds",//二维码的内容
width: "300",//二维码宽度
height: "300",//二维码高度
background: "white",//二维码背景色
foreground: "black"//二维码前景色
});
}
直接调用方法即可在页面对应div生成二维码;
如果二维码中含有中文,直接调用上述方法将会产生乱码,此时需要对中文进行转换。
含中文生成二维码
//中文支持
function utf16to8(str) {
var out, i, len, c;
out = "";
len = str.length;
for(i = 0; i < len; i++) {
c = str.charCodeAt(i);
if ((c >= 0x0001) && (c <= 0x007F)) {
out += str.charAt(i);
} else if (c > 0x07FF) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
} else {
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
}
return out;
}
//生成二维码
function mkqr(){
var congtent=Base.getValue("name");
console.log(congtent);
var qr=$("#qrcode").qrcode({
render: "canvas",//渲染方式,只是canvas、table
text: utf16to8(congtent),//二维码的内容
width: "300",//二维码宽度
height: "300",//二维码高度
background: "white",//二维码背景色
foreground: "black"//二维码前景色
});
}
生成二维码的text参数中调用中文转换即可实现。