引入

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/lrsjng.jquery-qrcode/0.18.0/jquery-qrcode.min.js"></script>

快速使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1" />
    <title>QRCode</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/lrsjng.jquery-qrcode/0.18.0/jquery-qrcode.min.js"></script>
</head>
<body>
    <div id="qrcode_demo"></div>
    <script>
        $(function(){
            $('#qrcode_demo').qrcode({text:"https://blog.yeziruo.cn/"});
        });
    </script>
</body>
</html>

参数

render: "table" 或 "canvas"(默认)
text: 文本内容
width: 256 宽
height: 256 高
background: "#ffffff" 背景颜色
foreground: "#66ccff" 前景颜色
typeNumber: -1 计算模式(暂不清楚作用)
correctLevel: QRErrorCorrectLevel.H 纠错等级(不建议指定，否则将不会渲染)
    QRErrorCorrectLevel.L,  （7%）
    QRErrorCorrectLevel.M, （15%）
    QRErrorCorrectLevel.Q, （25%）
    QRErrorCorrectLevel.H, （30%）

中文支持

使用该插件生成二维码，如果内容包含中文，则需要将Unicode(UTF-16)转为UTF-8。

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

标签: JavaScript

添加新评论