seeway

导航

jQuery生成二维码

使用jQuery生成二维码实际上是使用jQuery来实现画图、图形渲染。

1，引入jquery.min.js和jquery.qrcode.min.js这两个库文件。

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

2，html内容如下：

<body>
    <div class="panel panel-default">
        <div id="qrcode">
            
        </div>
    </div> 
</body>

3，调用方法生成二维码：

<script>
    $(function(){
　　　　　　
        outputQRCod("http:www.baidu.com", 100, 100);
　　　　　
　　　　　//转换中文字符串
        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;
        }

        //生成二维码
        function outputQRCod(txt, width, height) {
            //先清空
            $("#qrcode").empty();
            //中文格式转换
            var str = toUtf8(txt);
            //生成二维码
            $("#qrcode").qrcode({
                render: "canvas",//canvas和table两种渲染方式
                width: width,
                height: height,
                text: str
            });
        }
    })
</script

4，效果展示：

5，手机扫码结果：

 

posted on 2017-11-25 17:14  seeway  阅读(4056)  评论(0)  编辑  收藏  举报