生成二维码（二种插件）

生成二维码

一. jquery.qrcode.js (支持canvas和table两种方式)

a. 首先在页面加入jquery库文件，和qrcode插件

<script src="jquery.js"></script>
<script src="jquery.qrcode.min.js"></script>

b. 在需要显示二维码的地方加入一下代码

<div id="code"></div>

c. 调用qrcode插件

支持两种方式渲染，table & canvas，默认是canvas，效率最高，但一定要支持H5

$('#code').qrcode('string'); //任意字符串

或者用以下方式：

$("#code").qrcode({ 
    render: "table", //table方式 
    width: 200, //宽度 
    height:200, //高度 
    text: "hello world" //任意内容 
});

⚠️ 识别中文会出现乱码

因为jquery-qrcode是采用charCodeAt()方式进行编码转换的。而这个方法默认会获取它的Unicode编码，如果有中文内容，在生成二维码前就要把字符串转换成UTF-8，然后再生成二维码。

//汉字转成utf-8

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;    
}

我遇到的问题

1.生成的二维码是没有白色边框，因为活动页面的背景色是红色，导致用扫码枪扫描二维码非常困难，只需在二维码加上border为白色，适当放大二维码，即可解决这个问题。

二、QRCode.js

a. 引入QRCode.js文件

<script src='qrcode.js'></script>

b. 在需要显示二维码的地方，如下：

<div id="code"></div>

c. 调用QRCode插件

var code = new QRCode(document.getElementById('code'), {
    width: 200,
    height: 200
});

code.makeCode('hello world');

QRCode.js 还可以使用svg

a. 引入QRCode.js
b. 在需要显示二维码的地方，如下：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="qrcode">
</svg>

c. 调用QRCode插件

var code = new QRCode(document.getElementById('code'), {
    width: 200,
    height: 200,
    useSVG: true
});

Compare

QRCode.js：无依赖，原生js即可。可直接使用。
jquery.qrcode.js：依赖jquery，中文需进行转码

🔗代码链接