1.插件介绍

jquery.qrcode.min.js插件是jq系列的基于jq，在引入该插件之前要先引入jq。能够在客户端生成矩阵二维码QRCode 的jquery插件 ，使用它可以很方便的在页面上生成二维条码。

闲话少说，看demo吧！（haha...）

2.快速使用demo

简单介绍：这是一款快速应用案例，没有太特殊的需求的话够用了。鉴于需求，本例是把二维码生成了图片，可以保存到手机，然后发送给好友，直接识别二维码。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>二维码分享xx</title>

         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

         <link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.5.min.css" />

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

         <script src="jquery.mobile-1.4.5.min.js"></script>

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

         <style>

             * {

                 font-family: "微软雅黑";

             }

             #wxshare {

                 font-weight: normal;

                 background: #3d85c6;

                 border-radius: 5px;

                 padding: 5px 7px;

                 color: #fff;

                 border: none;

             }

             .tc {

                 text-align: center;

             }

             .block {

                 display: block;

             }

             .green {

                 color: #2d7104;

             }

             #myPopup small {

                 padding: 8px;

                 border-bottom: 1px solid #ccc;

             }

             #qrcodeImg {

                 margin-top: 20px;

                 padding: 3px;

                 border: 1px solid #ccc;

             }

         </style>

     </head>

     <body>

         <div data-role="page">

             <div data-role="header" data-theme="b">

                 <h1>七月</h1>

             </div>

             <div data-role="main" class="ui-content">

                 <a id='wxshare' data-rel="popup" href="#myPopup" class="ui-btn ui-corner-all" data-transition="slidedown"><span>邀请好友</span></a>

                 <!--弹窗-->

                 <div data-role="popup" id="myPopup" data-position-to="window" class="ui-content">

                     <div class='tc'>

                         <small class="green">长按一下二维码保存图片发送给好友</small>

                         <div id="code"></div>

                         <img src="" id="qrcodeImg"/><br>

                     </div>

                 </div>

             </div>

         </div>

         <script>

             $(function() {

                 $('#wxshare').tap(function() {

                     var qrcode = $('#code').qrcode({

                         render: "canvas", //也可以替换为table

                         width: 120,

                         height: 120,

                         text: "http://www.cnblogs.com/imelemon"/*可以通过ajax请求动态设置*/

                     }).hide();

                     //将生成的二维码转换成图片格式

                     var canvas = qrcode.find('canvas').get(0);

                     $('#qrcodeImg').attr('src', canvas.toDataURL('image/jpg'));

                 });

             });

         </script>

     </body>

 </html>

demo运行效果简略如下：有兴趣可以自己尝试一下

3.用法分析

（1）将jquery.qrcode.min.js和jquery添加到您的网页中

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

 <script type="text/javascript" src="jquery.qrcode.min.js"></script>
注意：2中demo引入jqueryMobile是为了样式和交互效果加的。基本引入这两个就可以使用了！

（2）然后要创建一个二维码的容器：
<div id="code"></div>
（3）加入js在容器中创建二维码：
<script>

            $(function() {

                $('#wxshare').tap(function() {

                    var qrcode = $('#code').qrcode({

                        render: "canvas", //也可以替换为table

                        width: 120,

                        height: 120,

                        text: "http://www.cnblogs.com/imelemon/p/6677956.html"/*可以通过ajax请求动态设置*/

                    }).hide();

                    //将生成的二维码转换成图片格式

                    var canvas = qrcode.find('canvas').get(0);

                    $('#qrcodeImg').attr('src', canvas.toDataURL('image/jpg'));

                });

            });

        </script>

4.进阶用法

（1）设置二维码大小

//生成100*100(宽度100，高度100)的二维码

         jQuery('#qrcode').qrcode({

             render  : "canvas",//也可以替换为table

             width   : 100,//单位是像素

             height  : 100,

             text    : "http://www.cnblogs.com/imelemon/p/6677956.html"

         });

（2）设置二维码颜色

 //生成前景色为红色背景色为白色的二维码

 jQuery('#qrcode').qrcode({

     render    : "canvas",//也可以替换为table

     foreground: "#C00",

     background: "#FFF",

     text : "http://www.cnblogs.com/imelemon/p/6677956.html"

 });

（3）设置二维码生成方式

//使用table/canvas生成

 jQuery('#qrcode').qrcode({

    render  : "table",//使用canvas生成就设置为 canvas

    text : "http://www.cnblogs.com/imelemon/p/6677956.html"

});

（3）将二维码转成图片格式：

->如2中demo

$('#wxshare').tap(function() {

        var qrcode = $('#code').qrcode({

                render: "canvas", //也可以替换为table

                width: 120,

                height: 120,

                text: "http://www.cnblogs.com/imelemon"/*可以通过ajax请求动态设置*/

}).hide();

        //将生成的二维码转换成图片格式

    var canvas = qrcode.find('canvas').get(0);

    $('#qrcodeImg').attr('src', canvas.toDataURL('image/jpg'));

});

5.遇坑及解决方法

遇到的问题：

1.生成了二维码图片，保存用微信识别的时候部分安卓机不去识别；

解决方法：

可能生成二维码的url过长，可适当增大qrcode（）中二维码的宽高；

注意：url如果过长生成的二维码会有问题，建议直接url字符串不要过长150个字符以内；

另外一个二维码demo下载地址 https://github.com/yingliyu/qrCode.git

参考：http://www.jq22.com/jquery-info294

jquery生成二维码图片的更多相关文章

  1. 微信生成二维码 只需一个网址即刻 还有jquery生成二维码

    <div class="orderDetails-info"> <img src="http://qr.topscan.com/api.php?text ...

  2. qrCode生成二维码图片

    QRCode.js 是一个用于生成二维码图片的插件. 1.文件脚本 var QRCode;!function(){function a(a){this.mode=c.MODE_8BIT_BYTE,th ...

  3. JAVA生成二维码图片代码

    首先需要导入 QRCode.jar 包 下载地址看这里   http://pan.baidu.com/s/1o6qRFqM import java.awt.Color;import java.awt. ...

  4. C# 利用QRCode生成二维码图片

    网上生成二维码的组件是真多,可是真正好用的,并且生成速度很快的没几个,QRCode就是我在众多中找到的,它的生成速度快.但是网上关于它的使用说明,真的太少了,大都是千篇一律的复制粘贴.这是本要用它做了 ...

  5. java生成二维码图片

    1.POM文件引入 <dependency> <groupId>com.google.zxing</groupId> <artifactId>core& ...

  6. Node.js在指定的图片模板上生成二维码图片并附带底部文字说明

    在Node.js中,我们可以通过qr-image包直接在后台生成二维码图片,使用方法很简单: var qr = require('qr-image'); exports.createQRImage = ...

  7. 使用python调用zxing库生成二维码图片

    (1)     安装Jpype 用python调用jar包须要安装jpype扩展,在Ubuntu上能够直接使用apt-get安装jpype扩展 $ sudo apt-get install pytho ...

  8. js 生成二维码图片

    1.用纯JavaScript实现的微信二维码图片生成器 QRCode.js是javascript实现二维码(QRCode)制作生成库. QRCode.js有着良好的跨浏览器兼容性(高版本使用HTML5 ...

  9. php 生成二维码图片

    php 生成二维码图片 (1)下载类库文件 php类库PHP QR Code,地址:http://phpqrcode.sourceforge.net/. (2)放到项目里 把下载的文件解压后有个php ...

随机推荐

  1. lucene 查询

    csdn blog - Lucene 3.0 的Query Parser(查询语法)   ibm developerWorks - 使用 Apache Lucene 2.4.1 搜索文本   osch ...

  2. python元组、列表的异同总结

    定义的异同: 列表(list):[] list是一种有序的集合,能够随时加入和删除当中的元素.用 [] 表示. 列表的三个特性:①创建之后也能够加减改动元素. ②元素能够是数字.字符.变量等.也能够混 ...

  3. CentOS7中关闭selinux

    在安装Cobbler和Puppet时需要关闭selinux,但是通常情况下载安装完CentOS7后,默认情况下SElinux是启用状态, 如下所示: [csharp] view plaincopy   ...

  4. Spring 新手教程（二） 生命周期和作用域

    以下的知识点是针对使用配置文件讲的(annotation相应标签后面文章会具体阐述) Bean的生命周期: 为什么关心这个问题? 我们使用IOC的目的就是为了让Spring IOC帮我们管理对象.从而 ...

  5. 345. Reverse Vowels of a String【easy】

    345. Reverse Vowels of a String[easy] Write a function that takes a string as input and reverse only ...

  6. Step By Step(Lua调用C函数)

    原文: http://www.cnblogs.com/stephen-liu74/archive/2012/07/23/2469902.html Lua可以调用C函数的能力将极大的提高Lua的可扩展性 ...

  7. 自定义 Collection View 布局

    自定义 Collection View 布局 answer-huang 29 Mar 2014 分享文章 UICollectionView 在 iOS6 中第一次被引入,也是 UIKit 视图类中的一 ...

  8. IOS设计模式的六大设计原则之依赖倒置原则(DIP,Dependence Inversion Principle)

    定义 高层模块不应该依赖于低层模块,二者都应该依赖于抽象:抽象不应该依赖细节:细节应该依赖抽象. 定义解读 依赖倒置原则在程序编码中经常运用,其核心思想就是面向接口编程,高层模块不应该依赖低层模块(原 ...

  9. C#网络编程系列文章(五)之Socket实现异步UDPserver

    原创性声明 本文作者:小竹zz 本文地址http://blog.csdn.net/zhujunxxxxx/article/details/44258719 转载请注明出处 文章系列文件夹 C#网络编程 ...

  10. Vsphere日记02.ESXi5.5.configuration

    2.Vsphere ESXi 5.5 configuration 步骤1:启动 ESXI 服务器 步骤2:按 F2 进入用户登录界面 输入用户名及密码,进入参数设置界面.密码为我安装时候设置的&quo ...