在线二维码生成器
使用开源二维码库 jquery.qrcode.js (https://github.com/jeromeetienne/jquery-qrcode)在浏览器上直接生成二维码,不需要后端程序支持。该库对中文不友好。
生成二维码
$('#qrcode') .empty(() .qrcode({ render: window.CanvasPattern ? 'canvas' : 'table', width: 300, height: 300, text: 'blog.zhengxianjun.com' });
jquery.qrcode 核心是 qrcode.js,jquery.qrcode.js 将其封装成了 jQuery 扩展,封装代码很少。以表格 table 模式可以使在不支持 canvas 的浏览器下也能正常运行。
二维码配置
var options = { render : "canvas", // 渲染方式 table|canvas width : 256, // 二维码宽度 height : 256, // 二维码高度 typeNumber : -1, // 计算模式 correctLevel : QRErrorCorrectLevel.H, // 纠错等级 background : "#ffffff", // 背景色 foreground : "#000000" // 前景色 };
中文二维码
jquery.qrcode 使用 charCodeAt 转码,charCodeAt 使用的 2 位的 Unicode 编码,中文字符采用 3 位的 UTF8 编码,两者长度不匹配,导致生成二维码的源字符流有误。
需要先将 UTF16 转 UTF8,实现来自 http://www.onicos.com/staff/iz/amuse/javascript/expert/utf.txt
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; }