基于jquery二维码生成插件qrcode

本文将介绍一款基于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

<div class="modal-body" id="qrCode" style="left:40px">

 </div>

3、调用qrcode插件。

var str = "http://" + location.host + "/ActivityDetail.html?id=" + row.ActivityGuid + "&isMail=" + row.isMail + "";
$("#qrCode").empty();

$('#qrCode').qrcode(str);

//$('#qrCode').qrcode("http://www.jb51.net");//任意字符串

4、我们试验的时候发现不能识别中文内容的二维码，通过查找多方资料了解到，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("2017鸡年大吉！");
$('#qrCode').qrcode(str);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jquery插件qrcode在线生成二维码

    随着移动互联网的发展,二维码现在应用得越来越广泛了,随手扫扫就可以浏览网站.加个好友什么的,比起手工输入真的是方便太多了. 前期做了一个综合测评系统,考虑逐步实现移动化,一长串的IP地址用户输入也不方便,借助二维码的话,用户拿起手机扫扫就可以直接进入系统. 基于这个应用场景,就上网研究下了网站二维码的实现方式,归纳起来有以下两种: 1.借助一些二维码生成网站或者二维码生成器生成二维码图片,然后挂在网站上,如码云 QR-Code (二维码) 在线生成器 优点:开发成本为零,能够快速实现多样化的二维

  • 使用jquery插件qrcode生成二维码

    二维码应用已经渗透到我们的生活工作当中,您只需要用手机对着二维码"扫一扫"即可获得所对应的信息,方便我们了解商家.购物.观影等等.本文将介绍一款基于jquery的二维码生成插件qrcode,在页面中调用该插件就能生成对应的二维码. qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式,您可以到获取最新的代码. 如何使用 1.首先在页面中加入jquery库文件和qrcode插件. <script type="text

  • 利用jquery.qrcode在页面上生成二维码且支持中文

    实例如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>使用j

  • 使用jquery.qrcode.js生成二维码插件

    使用jquery.qrcode.js生成二维码插件

    二维码应用已经渗透到我们的生活工作当中,您只需要用手机对着二维码"扫一扫"即可获得所对应的信息,方便我们了解商家.购物.观影等等.本文将介绍一款基于jquery的二维码生成插件qrcode,在页面中调用该插件就能生成对应的二维码. 1.qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式, github源码地址:https://github.com/jeromeetienne/jquery-qrcode 参数说明: render 

  • javaScript生成支持中文带logo的二维码(jquery.qrcode.js)

    javaScript生成支持中文带logo的二维码(jquery.qrcode.js)

    本文实例为大家分享了支持中文,且带logo的二维码的生成代码,供大家参考,具体内容如下 资料搜索 选择star最多的两个 第一个就是用的比较多的jquery.qrcode.js(但不支持中文,不能带logo)啦,第二个支持ie6+,支持中文,根据第二个源代码,使得,jquery.qrcode.js,支持中文. 支持中文 //qrcode.js function QR8bitByte(data) { this.mode = QRMode.MODE_8BIT_BYTE; this.data = da

  • 使用jquery组件qrcode生成二维码及应用指南

    有一些耗cpu的计算,完全可以在客户端上计算,比如生成二维码. qrcode其实是通过计算,然后使用jquery实现图形渲染和画图.支持canvas和table两种方式生成我们所需的二维码. 具体用法 qrcode是jquery组件,需要至少两个js, 就是 jquery 和 jquery.qrcode.可以到https://github.com/jeromeetienne/jquery-qrcode获取最新的代码. 复制代码 代码如下: <script type="text/javasc

  • 使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo

    使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo

    0 Jquery.Qrcode简介 Jquery.Qrcode.js是一个在浏览器端基于Jquery动态生成二维码的插件,支持Canvas和Table两种渲染方式,它的优点是在客户端动态生成,减轻了服务端压力,尤其是在大量使用二维码的系统中.Jquery.Qrcode主要包括以下参数设置: •render 定义二维码的渲染方式,有table和canvas两种渲染方式 •width 定义二维码的宽度 •height 定义二维码的高度 •text 定义二维码内容 •typeNumber 二维码的计算

  • 使用jquery.qrcode生成彩色二维码实例

    使用jquery.qrcode生成彩色二维码实例

    jquery.qrcode.js 是居于jquery类库的绘制二维码的插件,用它来实现二维码图形渲染支持canvas和table两种绘图方式.(jquery.qrcode.js 设置显示方式为table时在webkit核心浏览器如chrome下会变形,这个需要注意.) 下面为测试代码(增加了颜色控制,可以设置4个区块的颜色值,需要指定render为table.),效果如下: 代码如下: <html> <head> <title>JS生成二维码</title>

  • 使用jquery.qrcode.min.js实现中文转化二维码

    今天还是要讲一下关于二维码的知识,前几篇讲解中有讲到我使用的可以生成二维码的js是qrcode.js,然后结合Cordovad的插件$cordovaBarcodeScanner插件可以扫描二维码,这样就基本完成了简单的扫一扫功能.后来在项目进行,开始要调用后台数据和传参数到接口的时候发现qrcode.js它只能解析英文或者数字,并且只能解析一个字符串! 而我所需要的是将一个对象转化成二维码,然后在扫描的时候取出对象中的数据,显然qrcode.js不能实现,经过查找,找到另一个jquery.qrc

  • jQuery qrcode生成二维码的方法

    现在二维码越来越流行,很多网页都会有个二维码,扫描后可通过手机浏览. 以前做类似的项目一般是在网页上生成图片,然后把图片插入到网页. 这样做不能每个页面都生成二维码. jquery-qrcode是一个能够在浏览器端生成二维码的jquery插件.它是独立的,最小压缩之后不足4k,也没有图片下载请求.引入该类库之后,只需要一行代码,就可以很容易在web页面加上二维码. qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式,可以到 https:/

随机推荐