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

最新推荐文章于 2024-08-21 08:50:28 发布

cs4380

最新推荐文章于 2024-08-21 08:50:28 发布

阅读量662

点赞数 1

分类专栏： javascript 其他文章标签： jquery.qrcode 前端生成二维码二维码

本文链接：https://blog.csdn.net/cs4380/article/details/79665543

版权

其他同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

javascript

4 篇文章 0 订阅

订阅专栏

1.github下载地址

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>

输出结果：