您的位置：首页 > 编程技术 > js  >  使用jquery插件qrcode生成二维码

使用jquery插件qrcode生成二维码

 更新时间：2015年10月23日 11:37  点击：2174

二维码应用已经渗透到我们的生活工作当中，您只需要用手机对着二维码“扫一扫”即可获得所对应的信息，方便我们了解商家、购物、观影等等。本文将介绍一款基于jquery的二维码生成插件qrcode，在页面中调用该插件就能生成对应的二维码。
qrcode其实是通过使用jQuery实现图形渲染，画图，支持canvas（HTML5）和table两种方式，您可以到获取最新的代码。

如何使用
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.jb51.net"); //任意字符串

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

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

这样就可以在页面中直接生成一个二维码，你可以用手机“扫一扫”功能读取二维码信息。
识别中文
我们试验的时候发现不能识别中文内容的二维码，通过查找多方资料了解到，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);

现在网上制作二维码的教程特别多，大家要学会灵活运用，选择自己最喜欢的方法掌握二维码的制作技巧。

[!--infotagslink--]

相关文章

  • php生成二维码中文乱码问题解决方法

    最近做了个扫描二维码得到vcard的项目，遇到一个问题，有一部分生成完的二维码，用android系统手机扫描后得到的vcard中的中文姓名是乱码，经过比对发现，这部分vcard中ORG这个...2016-11-25

  • php二维码生成

    本文介绍两种使用 php 生成二维码的方法。 （1）利用google生成二维码的开放接口，代码如下： /** * google api 二维码生成【QRcode可以存储最多4296个字母数字类型的任意文本，具体可以查看二维码数据格式】 * @param strin...2015-10-21

  • Java生成随机姓名、性别和年龄的实现示例

    这篇文章主要介绍了Java生成随机姓名、性别和年龄的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-10-01

  • C#生成随机数功能示例

    这篇文章主要介绍了C#生成随机数功能,涉及C#数学运算与字符串操作相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25

  • 微信小程序二维码生成工具 weapp-qrcode详解

    这篇文章主要介绍了微信小程序 二维码生成工具 weapp-qrcode详解,教大家如何在项目中引入weapp-qrcode.js文件，通过实例代码给大家介绍的非常详细，需要的朋友可以参考下...2021-10-23

  • jQuery为动态生成的select元素添加事件的方法

    下面小编就为大家带来一篇jQuery为动态生成的select元素添加事件的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-09-01

  • Jquery插件实现点击获取验证码后60秒内禁止重新获取

    通过jquery.cookie.js插件可以快速实现“点击获取验证码后60秒内禁止重新获取（防刷新）”的功能效果图：先到官网（http://plugins.jquery.com/cookie/）下载cookie插件，放到相应文件夹，代码如下：复制代码 代码如下: <!DOCTYPE ht...2015-03-15

  • php生成唯一数字id的方法汇总

    关于生成唯一数字ID的问题，是不是需要使用rand生成一个随机数，然后去数据库查询是否有这个数呢？感觉这样的话有点费时间，有没有其他方法呢？当然不是，其实有两种方法可以解决。 1. 如果你只用php而不用数据库的话，那时间戳+随...2015-11-24

  • PHP自动生成后台导航网址的最佳方法

    经常制作开发不同的网站的后台，写过很多种不同的后台导航写法。 最终积累了这种最写法，算是最好的吧...2013-09-29

  • 解决jquery插件：TypeError:$.browser is undefined报错的方法

    首先先说一说$.browser browser就是用来获取浏览器基本信息的。 jQuery 从 1.9 版开始，移除了 $.browser 和 $.browser.version ， 取而代之的是 $.support 。 在更新的 2.0 版本中，将不再支持 IE 6/7/8。 以后，如果用户需...2015-11-24

  • js生成随机数的方法实例

    js生成随机数主要用到了内置的Math对象的random()方法。用法如：Math.random()。它返回的是一个 0 ~ 1 之间的随机数。有了这么一个方法，那生成任意随机数就好理解了。比如实际中我们可能会有如下的需要： （1）生成一个 0 - 1...2015-10-21

  • .NET C#利用ZXing生成、识别二维码/条形码

    ZXing是一个开放源码的，用Java实现的多种格式的1D/2D条码图像处理库，它包含了联系到其他语言的端口。这篇文章主要给大家介绍了.NET C#利用ZXing生成、识别二维码/条形码的方法，文中给出了详细的示例代码，有需要的朋友们可以参考借鉴。...2020-06-25

  • 微信开发生成带参数的二维码的讲解

    在微信公众号平台开发者那里，在“账号管理”那里，有一项功能是“生成带参数的二维码”，通过这儿生成的二维码，只要通过微信扫一扫之后，会把事件自动推送到微...2016-05-19

  • 浅谈js二维码扫码登录是什么原理

    这篇文章主要介绍了浅谈js二维码扫码登录是什么原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-13

  • PHP验证码生成与验证例子

    验证码是一个现在WEB2.0中常见的一个功能了，像注册、登录又或者是留言页面，都需要注册码来验证当前操作者的合法性,我们会看到有些网站没有验证码，但那是更高级的验证了，...2016-11-25

  • PHP生成不同颜色、不同大小的tag标签函数

    复制代码 代码如下:function getTagStyle(){ $minFontSize=8; //最小字体大小,可根据需要自行更改 $maxFontSize=18; //最大字体大小,可根据需要自行更改 return 'font-size:'.($minFontSize+lcg_value()*(abs($maxFo...2013-10-04

  • C#利用QrCode.Net生成二维码（Qr码）的方法

    QrCode.Net是一个使用C#编写的用于生成二维码图片的类库，使用它可以非常方便的为WinForm、WebForm、WPF、Silverlight和Windows Phone 7应用程序提供二维码编码输出功能。可以将二维码文件导出为eps格式...2020-06-25

  • php中利用str_pad函数生成数字递增形式的产品编号

    解决办法：$str=”QB”.str_pad(($maxid[0]["max(id)"]+1),5,”0″,STR_PAD_LEFT ); 其中$maxid[0]["max(id)"]+1) 是利用max函数从数据库中找也ID最大的一个值， ID为主键，不会重复。 str_pad() 函数把字符串填充为指...2013-10-04

  • JS生成某个范围的随机数【四种情况详解】

    下面小编就为大家带来一篇JS生成某个范围的随机数【四种情况详解】。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧...2016-04-22

  • C#生成Word文档代码示例

    这篇文章主要介绍了C#生成Word文档代码示例,本文直接给出代码实例,需要的朋友可以参考下...2020-06-25