打赏银两×

博主辛苦了，我要打赏银两给博主，犒劳犒劳站长。

支付宝支付

微信支付

QQ钱包

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

学习笔记马富天 2016-07-19 15:16:40 21 0

【摘要】juqery.qrcode.js是jQuery在线生成二维码插件，此JS特效基于HTML5的一些特效,如Canvas绘图，因此浏览的浏览器需要支持HTML5特性，插件支持自定义LOGO功能，支持文字和图片两种模式，支持自定义LOGO位置、支持自定义二维码颜色、背景颜色、错误纠正模式、二维码圆滑度，非常强大的自定义功能，能够快速的打造你漂亮的二维码图片，非常不错的jQuery插件，值得学习和使用。

jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件，使用它可以很方便的在页面上生成二维条码。此插件是能够独立使用的，体积也比较小，使用gzip压缩后才不到4kb。

一、生产非图片的二维码

需要的js库：jquery-1.8.3.min.js、jquery.qrcode.min.js

插件下载地址：百度搜索可以找到很多

```
<!DOCTYPE html>  
```
```
<html>  
```
```
    <head>  
```

        <title>jquery.qrcode.js生成非图二维码</title>

        <script type="text/javascript" src="jquery-1.8.3.min.js"></script>

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

```
        <meta charset="utf-8" />
```
```
    <head>  
```

        <script type="text/javascript">

            function generateQRCode(rendermethod, picwidth, picheight, url) {

```
            $("#qrcode").qrcode({   
```

                    render: rendermethod, // 渲染方式有table方式（IE兼容）和canvas方式

                    width: picwidth, //宽度

                    height:picheight, //高度

                    text: utf16to8(url), //内容

                    typeNumber:-1,//计算模式

                    correctLevel:2,//二维码纠错级别

                    background:"#ffffff",//背景颜色

                    foreground:"#000000"  //二维码颜色

```
          
```
```
                });  
```
```
            }  
```
```
            function init() {  
```

                generateQRCode("table",200, 200, "http://www.numberer.net/");

```
            }  
```

            //  中文编码格式转换

```
            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;  
```
```
            }      
```
```
        </script>  
```
```
    </head>  
```
```
    <body onLoad="init()">  
```

        <h1>非图片二维码生成</h1>

```
        <div id="qrcode"></div>  
```
```
    </body>  
```
```
</html>
```

二、生产图片二维码

需要的js库：jquery-1.8.3.min.js、excanvas.compiled.js、jquery.qrcode.min.js

插件下载地址：excanvas.compiled.js在网上是可以下载到的

```
<!DOCTYPE html>  
```
```
<html>  
```
```
    <head>  
```
```
        <meta charset="utf-8" />
```

        <title>jquery.qrcode.js生成图片二维码</title>

        <script type="text/javascript" src="jquery-1.8.3.min.js"></script>

        <script type="text/javascript" src="excanvas.compiled.js"></script>

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

```
    <head>  
```

        <script type="text/javascript">

        function generateQRCode(rendermethod, picwidth, picheight, url) {

```
      
```
```
            $("#qrcode").qrcode({   
```

                render: rendermethod, // 渲染方式有table方式（IE兼容）和canvas方式

                width: picwidth, //宽度

                height:picheight, //高度

                text: utf16to8(url), //内容

                typeNumber:-1,//计算模式

                correctLevel:2,//二维码纠错级别

                background:"#ffffff",//背景颜色

                foreground:"#000000"  //二维码颜色

```
      
```
```
            });  
```
```
        }  
```
```
        function init() {  
```

            generateQRCode("table",200, 200, "http://www.numberer.net/");

            var margin = ($("#qrcode").height()-$("#codeico").height())/2;

            $("#codeico").css("margin",margin);

```
        }  
```
```
        //中文编码格式转换  
```
```
        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;  
```
```
        }     
```
```
      
```
```
        </script>  
```
```
      
```
```
        <style type="text/css">  
```
```
            #codeico{  
```

                //生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom"

```
                position:fixed;
```
```
                z-index:9999999;  
```
```
                width:30px;   
```
```
                height:30px;  
```

                background:url("1.png") no-repeat;

```
            }  
```
```
        </style>  
```
```
    </head>  
```
```
    <body onLoad="init()">  
```

        <h1>有图二维码生成</h1>

```
        <div id="qrcode">  
```
```
            <div id="codeico"></div>  
```
```
        </div>        
```
```
    </body>  
```
```
</html>
```

版权归马富天博客所有

本文标题：《使用jQuery的插件juqery.qrcode.js生成二维码》

本文链接地址：http://www.mafutian.net/164.html

转载请务必注明出处，小生将不胜感激，谢谢! 喜欢本文或觉得本文对您有帮助，请分享给您的朋友 ^_^

顶0

踩0

上一篇《 javascript中prompt()方法弹出输入框的使用示例》下一篇《 Hadoop入门经典运行wordcount 》

评论审核未开启

回复后邮件通知我

随机阅读换一批

TOP10

浏览最多
评论最多