使用qrcode.js插件生成二维码

ゞ浴缸里的玫瑰 2022-05-29 11:57 226阅读 0赞

# 1.github下载地址 #

[https://github.com/jeromeetienne/jquery-qrcode][https_github.com_jeromeetienne_jquery-qrcode]

# 2.使用案例 #

qrcode.js支持canvas和table两种方式进行图片渲染.

默认采用 h5 的canvas实现。

如何你的页面使用者，可能存在低版本的浏览器，无法支持 h5 的写法可以采用table方式

二维码链接跳转，携带中文参数

<!DOCTYPE HTML >
    <html lang="en" >
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="jquery.qrcode.min.js"></script>
    </head>
    <body>
        <div id="qrcode"></div>
    
        <script>
            var str = toUtf8("https://www.baidu.com/s?wd=csdn论坛");
    
            //qrcode支持canvas和table两种方式进行图片渲染
            $('#qrcode').qrcode({
                render: "canvas", //默认是canvas渲染,可以设置为table
                width:100,
                height:100,
                text: str
            });
    
            //处理中文乱码
            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;
            }
        </script>
    </body>
    </html>

输出结果：

![70][]

[https_github.com_jeromeetienne_jquery-qrcode]: https://github.com/jeromeetienne/jquery-qrcode
[70]: /images/20220529/0530c05d09584ce58b071ad367131658.png