直接上代码吧,jquery.qrcode的源文件下载地址:https://github.com/jeromeetienne/jquery-qrcode
是基于jquery实现的,jquery.qrcode又是在qrcode.js的基础上封装的,以下是测试代码,可直接使用。
<!DOCTYPE html>
<html>
<head>
<title>basic example</title>
<!--注意加上utf-8的申明,不然测试中文字符串的转换时,扫描后的中文字符是乱码,会误以为是转换代码问题。-->
<meta charset="utf-8" />
</head>
<body>
<script src="../src/jquery-1.11.1.js"></script>
<script type="text/javascript" src="../jquery.qrcode.min.js"></script>
<!-- <script type="text/javascript" src="../src/jquery.qrcode.js"></script>
<script type="text/javascript" src="../src/qrcode.js"></script> -->
<div style="width:800px;margin:10px auto;text-align:center;">
<p>以table形式渲染,兼容低端浏览器</p>
<div id="qrcodeTable"></div>
<p>以canvas来渲染,性能好,不兼容低端浏览器</p>
<div id="qrcodeCanvas"></div>
<p>二维码测试中文字符串</p>
<div id="code"></div>
</div>
<script>
//中文字符串转换
function toUtf8(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(){
var str = toUtf8("二维码测试");
//扫码后显示字符串
$("#code").qrcode({width: 200,height: 200,text: str});
});
//扫描后跳转到指定网页
$('#qrcodeTable').qrcode({
render : "table",
text : "https://www.baidu.com"
});
$('#qrcodeCanvas').qrcode({
text : "https://www.baidu.com"
});
</script>
</body>
</html>
1.为什么要中文转换?
答:jquery-qrcode是采用charCodeAt()方式进行编码转换的。而这个方法默认会获取它的Unicode编码,如果有中文内容,在生成二维码前就要把字符串转换成UTF-8,然后再生成二维码。
2.jquery.qrcode可设置的参数有哪些?
答:看jquery.qcode的源代码可知有如下参数可供设置
options = $.extend( {}, {
render : "canvas",
width : 256,
height : 256,
typeNumber : -1,
correctLevel : QRErrorCorrectLevel.H,
background : "#ffffff",
foreground : "#000000"
}, options);
3.二维码渲染的方式有canvas和table,两者的区别?
答:以table形式渲染,兼容低端浏览器(比如不支持canvas的浏览器)但性能不好;以canvas来渲染,性能好但不兼容低端浏览器。
4.扫码后的形式有两种
答:
var str = toUtf8("二维码测试");
//扫码后显示字符串
$("#code").qrcode({width: 200,height: 200,text: str});
//扫描后跳转到指定网页
$('#qrcodeTable').qrcode({
render : "table",
text : "https://www.baidu.com"
});