当前位置:首页 > 编程教程 > jQuery技术文章 > 基于jquery二维码生成插件qrcode

关于jquery二维码生成插件qrcode详解

  • 发布时间:
  • 作者:码农之家
  • 点击:181

这篇文章主要知识点是关于jquery、二维码、qrcode、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

PHP与jQuery开发实例
  • 类型:PHP开发大小:9.8 MB格式:PDF作者:(印) 乔希 (Joshi,V.) 著,
立即下载

基于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" >
 
 </div>

3、调用qrcode插件。

var str = "http://" + location.host + "/ActivityDetail.html?id=" + row.ActivityGuid + "&isMail=" + row.isMail + "";
$("#qrCode").empty();
 
$('#qrCode').qrcode(str);
 
//$('#qrCode').qrcode("//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);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

jQuery 相关电子书
学习笔记
网友NO.132714

QRCode.js:基于JQuery的生成二维码JS库的使用

1. QRCode.js QRCode.js是一个二维码生成javascript库;支持跨浏览器的HTML5 Canvas和表格标签的DOM操作;并且不依赖其它的库或拓展。 主页:QRCode.js Github:davidshimjs/qrcodejs 2. 用法 2.1 基础用法 div id="qrcode"/divscript type="text/javascript"new QRCode(document.getElementById("qrcode"), "https://www.gzpblog.com");/script 2.2 传参用法 div id="qrcode"/divscript type="text/javascript"var qrcode = new QRCode(document.getElementById("qrcode"), { text: "https://www.gzpblog.com", width: 128, height: 128, colorDark : "#000000", colorLight : "#ffffff", correctLevel : QRCode.CorrectLevel.H});/script 2.3 调用函数 qrcode.clear(); // 清除二维码qrcode.makeCode("https://www.gzpblog.com"); // 创建一个新的二维码 3. 适用范围 之前用PHP QR Code来生成二维码,发现通过这个PHP插件来生成,有些小问题;它内部集成得不是很好,不是很适合用来直接展示二维码到浏览器上,样式不好控制(……

网友NO.489720

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

jquery.qrcode.js 是居于jquery类库的绘制二维码的插件,用它来实现二维码图形渲染支持canvas和table两种绘图方式。(jquery.qrcode.js 设置显示方式为table时在webkit核心浏览器如chrome下会变形,这个需要注意。) 下面为测试代码(增加了颜色控制,可以设置4个区块的颜色值,需要指定render为table。),效果如下: 代码如下: htmlheadtitleJS生成二维码/titlescript type="text/javascript" src="jquery-1.4.2.min.js"/scriptscript type="text/javascript" src="jquery.qrcode.min.js"/scriptstyle #output{ margin-left:300px; margin-top:100px; }/style/headbodydiv id="output"/divscript window.onload = function () { var trs = $('#output').qrcode({ width: 100, height: 100, render: "canvas", //设置渲染方式 table canvas text: utf16to8("javascript生成二维码"), background: "#ffffff", //背景颜色 foreground: "red" //前景颜色 }).find('tr'), trLen = Math.floor(trs.size() / 2), tdLen = Math.floor(trs……

网友NO.828709

利用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使用jquery-qrcode生成二维码,支持中文/title script src="../Scripts/jquery-1.4.4.min.js" type="text/javascript"/script script src="jquery.qrcode.min.js" type="text/javascript"/script script type="text/javascript" function utf16to8(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) out += String.fromCharCode(0x80 | ((c 6) out += String.fromCharCode(0x80 | ((c 0) } else { out += String.fromCharCode(0xC0 | ((c 6) out += String.fromCharCode(0x80 | ((c 0) } } return out; } $(function () { jQuery('#output').qrcode(utf16to8("今天天气不错")); }) /script /head body div id="output"/div /body /html //jquery.qrcode.min.js (funct……

网友NO.421540

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

二维码应用已经渗透到我们的生活工作当中,您只需要用手机对着二维码“扫一扫”即可获得所对应的信息,方便我们了解商家、购物、观影等等。本文将介绍一款基于jquery的二维码生成插件qrcode,在页面中调用该插件就能生成对应的二维码。 1.qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式, github源码地址:https://github.com/jeromeetienne/jquery-qrcode 参数说明: render : "canvas",//设置渲染方式 width : 256, //设置宽度 height : 256, //设置高度 typeNumber : -1, //计算模式 correctLevel : QRErrorCorrectLevel.H,//纠错等级 background : "#ffffff",//背景颜色 foreground : "#000000" //前景颜色 2.使用实例: 插件引用: script src="../Js/jquery-1.11.3.min.js"/script script src="../Js/jquery-qrcode-master/jquery.qrcode.min.js"/script 简单实例1: div id="code"/div script //任意字符串 生成二维码 //默……

网友NO.428827

jQuery qrcode生成二维码的方法

现在二维码越来越流行,很多网页都会有个二维码,扫描后可通过手机浏览。 以前做类似的项目一般是在网页上生成图片,然后把图片插入到网页。 这样做不能每个页面都生成二维码。 jquery-qrcode是一个能够在浏览器端生成二维码的jquery插件。它是独立的,最小压缩之后不足4k,也没有图片下载请求。引入该类库之后,只需要一行代码,就可以很容易在web页面加上二维码。 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支持can……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com