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 加速索引建立速度

    加速 lucene 索引建立速度 ImproveIndexingSpeed

  2. 利用HTML5 Canvas和Javascript实现的蚁群算法求解TSP问题演示

    HTML5提供了Canvas对象,为画图应用提供了便利. Javascript可执行于浏览器中, 而不须要安装特定的编译器: 基于HTML5和Javascript语言, 可随时编写应用, 为算法測试带 ...

  3. win10 环境下 MinGW-w64安装

    MinGW-w64 就是 著名C/C++编译器GCC的Windows版本. 一.什么是 MinGW-w64 ?MinGW 的全称是:Minimalist GNU on Windows .它实际上是将经 ...

  4. php私有成员private的程序题目

    class base { private $member; function __construct() { echo __METHOD__ . "(begin)\n"; $thi ...

  5. oracle10g安装,卸载

    一.安装 1.因为oracle的特殊性,笔者选择通过虚拟机安装windows7旗舰版安装数据库,大家的系统假设是windows xp.windows 7,windows 8能够直接安装,windows ...

  6. 影子寄存器(shadow register)

    1.以下仅供参考:有阴影的寄存器,表示在物理上这个寄存器对应2个寄存器,一个是程序员可以写入或读出的寄存器,称为preload register(预装载寄存器),另一个是程序员看不见的.但在操作中真正 ...

  7. C# Post Json数据到对方url

    1. /// <summary> /// 调用对方Url,Post上传数据 /// </summary> /// <param name="postData&q ...

  8. java - day12 - InteraceTest

    接口的实现.继承等 package test.interfacedemo; import test.interfacedemo.Inter; public class InterfaceDemo { ...

  9. C++避免内存泄漏的一种技巧

    C++ Primer 4th中在section 13.5中的U_Ptr就是一种实用的例子 通过计数的方式,并提供自己的抽象类型的Pointer,从而实现内存管理.在一定的范围内还是非常有效的,比如说在 ...

  10. ZBarReaderView (转)

    ZBar为我们提供了两种使用方式,一种是直接调用ZBar提供的ZBarReaderViewController打开一个扫描界面,另一种方式是使用ZBar提供的可以嵌在其他视图中的ZBarReaderV ...