使用jquery.qrcode生成二维码

转载 2014年05月28日 09:37:07

二维码应用已经渗透到我们的生活工作当中,您只需要用手机对着二维码“扫一扫”即可获得所对应的信息,方便我们了解商家、购物、观影等等。本文将介绍一款基于jquery的二维码生成插件qrcode,在页面中调用该插件就能生成对应的二维码。

qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式,您可以到https://github.com/jeromeetienne/jquery-qrcode获取最新的代码。


如何使用

1、首先在页面中加入jquery库文件和qrcode插件。

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

2、在页面中需要显示二维码的地方加入以下代码:

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

3、调用qrcode插件。

qrcode支持canvas和table两种方式进行图片渲染,默认使用canvas方式,效率最高,当然要浏览器支持html5。直接调用如下:

 
$('#code').qrcode("http://www.helloweba.com"); //任意字符串 

您也可以通过以下方式调用:

 
$("#code").qrcode({ 
    render: "table"//table方式 
    width: 200//宽度 
    height:200//高度 
    text: "www.helloweba.com" //任意内容 
}); 

这样就可以在页面中直接生成一个二维码,你可以用手机“扫一扫”功能读取二维码信息。

识别中文

我们试验的时候发现不能识别中文内容的二维码,通过查找多方资料了解到,jquery-qrcode是采用charCodeAt()方式进行编码转换的。而这个方法默认会获取它的Unicode编码,如果有中文内容,在生成二维码前就要把字符串转换成UTF-8,然后再生成二维码。您可以通过以下函数来转换中文字符串:

 
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;    
} 

以下示例:

 
var str = toUtf8("钓鱼岛是中国的!"); 
$('#code').qrcode(str); 

jquery-qrcode js生成二维码,完美解决 json

在项目中需要使用在前端通过js的方式生成一个二维码,二维码内容为后台传过来的json数据,数据中包含了中英文,引号等信息,直接使用github中的jquery-qrcode.js发现生成的二维码根本无...
  • zhanlurbh
  • zhanlurbh
  • 2016-04-19 20:09:15
  • 6155

jquery.qrcode生成二维码文件

jQuery(document).ready(function(){ jQuery('#output').qrcode({ text: "http://www.csdn.net/", ...
  • jiangzunshao
  • jiangzunshao
  • 2016-11-03 22:53:09
  • 279

jquery.qrcode生成二维码demo

  • 2017年08月31日 15:56
  • 48KB
  • 下载

js jquery.qrcode生成二维码 带logo 支持中文

  • 2016年04月28日 17:15
  • 114KB
  • 下载

jquery.qrcode.js 生成二维码。加logo 下载到本地

自己在使用Jquery.qrcode.js终碰到的问题,刚开始好好的  能插如logo,能下载,然后不能用了下载了,总是报错。 百度了好长时间才看到。。。问题所在。。。不说了  贴代码。 Re...
  • qq_38417422
  • qq_38417422
  • 2018-01-09 21:28:12
  • 239

前端使用jquery.qrcode生成二维码

1.在页面引入jq和jq.qrcode&amp;lt;script src=&quot;../js/jquery-2.1.0.js&quot; type=&quot;text/javascript&q...
  • yuyuking
  • yuyuking
  • 2018-03-30 10:46:53
  • 7

毛超帅 使用 jquery.qrcode.js 生成网站地址url二维码图片______软件开发-JAVA

使用 jquery.qrcode.js 生成网站地址url二维码图片 时间:1个月前   作者:庞顺龙   浏览:91   [站内原创,转载请注明出处] 标签: jQuery   使用...
  • qq_32047637
  • qq_32047637
  • 2016-09-10 15:09:31
  • 2894

jquery.qrcode生成二维码

  • 2016年08月09日 17:11
  • 39KB
  • 下载

909422229_java后台与jquer qrcode前台生成二维码教程

google 二维码生成: 一、什么是二维码: 二维码就是一个存储、传递信息的一个矩形条码。 二维条码具有储存量大、保密性高、追踪性高、抗损性强、备援性大、成本便宜等特性...
  • a909422229
  • a909422229
  • 2018-01-16 15:00:38
  • 86

jQuery.qrcode生成二维码

参考文章1:http://m.oschina.net/blog/652758 引入js: " type="text/javascript"> " type="text/javascript"> ...
  • landiljy
  • landiljy
  • 2017-10-30 20:06:07
  • 92
收藏助手
不良信息举报
您举报文章:使用jquery.qrcode生成二维码
举报原因:
原因补充:

(最多只允许输入30个字)