最近公司网站需要商品链接生成二维码以支撑移动端支付,最初考虑ajax调后端java服务(zxing)生成二维码图片保存在服务器,后来不经意搜索到jquery.qrcode.js这个可以在客户端直接生成二维码的jquery插件,用法很简单,首先下载jquery.qrcode.min.js,也可以在本文附件中下载,代码如下:
<!DOCTYPE html>
<html>
<head>
<title>example</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
</head>
<body>
<div id="qrcode"></div>
<script>
$('#qrcode').qrcode({
width: 300,//宽
height: 300, //高
render: !!document.createElement('canvas').getContext ? 'canvas' : 'table', //兼容不同浏览器,因为ie浏览器不兼容canvas渲染模式
text: window.location.href//获取当前链接生成二维码
});
</script>
</body>
</html>
jquery.qrcode.min.js分两种渲染方式生成二维码,一种是在html中插入table以点阵方式填充颜色组成二维码,一种是创建canvas元素再绘制图像(HTML5新特性)。后者是比较清爽的,但ie浏览器兼容性不理想,上面代码第15行有做容错处理。
插件还有如下配置:
typeNumber : -1, //算法模式 correctLevel : QRErrorCorrectLevel.H,//纠错 background : "#ffffff",//背景色 foreground : "#000000" //前景色
如果要生成中文二维码,最好先对中文进行转码
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; }