JS生成二维码

Vic.Wang2017/08/091323 阅读0 喜欢最近更新 2026/07/09 16:11:48

本文写于 2017 年，距今已有 9 年，文中提及的技术方案与接口可能已经过时，请注意甄别参考。

近期用到使用 JavaScript 生成二维码，网上找了些插件，顺便整理下。

目前比较流行的有两种插件 QRCode.js 和 jQuery.qrcode.js 。

QRCode.js

QRCode.js 是一个生成二维码的 JS 库。

主要是通过获取 DOM 的标签，再通过 HTML5 Canvas 绘制而成。

不依赖其他 JS 库

使用方法：

//生成二维码 && 配置
var qrcode = new QRCode(element, {
    text: "Nalan Chen's Blog", //二维码内容
    width: 256, //二维码宽
    height: 256, //二维码高
    colorDark: '#000000', //前景色
    colorLight: '#ffffff', //背景色
    correctLevel: QRCode.CorrectLevel.H //容错界别
});


//清除代码
qrcode.clear();

//生成另外一个二维码
qrcode.makeCode("http://mingsixue.com");

参数 correctLevel 有 4 种值，分别是 QRCode.CorrectLevel.L、QRCode.CorrectLevel.M、QRCode.CorrectLevel.Q、QRCode.CorrectLevel.H，代表的是容错界别。

源码下载：QRCode.min.js

github：qrcodejs

jQuery.qrcode.js

使用方法：

$('#code').qrcode({
    render: 'canvas', //两种模式，默认canvas，table
    width: 256,
    height:256,
    foreground: "#000", //前景色
    background: "#FFF", //背景色
    text: 'Nalan Chen'
});

jQuery.qrcode 对中文的支持不好，需要处理一下再去生成二维码，例如下面的编码处理函数：

//编码处理
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;
}