使用JavaScript库jQuery.qrcode生成二维码

在线二维码生成器

使用开源二维码库 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;
}

作者: 袖之欢

科技改变生活,编程改变世界。

发表评论

电子邮件地址不会被公开。 必填项已用*标注