使用jquery插件qrcode生成二维码


Posted in Javascript onOctober 22, 2015

二维码应用已经渗透到我们的生活工作当中,您只需要用手机对着二维码“扫一扫”即可获得所对应的信息,方便我们了解商家、购物、观影等等。本文将介绍一款基于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("https://3water.com"); //任意字符串

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

$("#code").qrcode({ 
  render: "table", //table方式 
  width: 200, //宽度 
  height:200, //高度 
  text: "https://3water.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);

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

Javascript 相关文章推荐
jquery 查找新建元素代码
Jul 06 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 Javascript
jQuery插件passwordStrength密码强度指标详解
Jun 24 Javascript
AngularJS控制器之间的数据共享及通信详解
Aug 01 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
Sep 08 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
jquery的 filter()方法使用教程
Mar 22 jQuery
详解基于Node.js的HTTP/2 Server实践
May 31 Javascript
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
JavaScrip调试技巧之断点调试
Oct 22 #Javascript
浅析JavaScript 调试方法和技巧
Oct 22 #Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
Oct 22 #Javascript
浅谈node.js中async异步编程
Oct 22 #Javascript
JS实现不使用图片仿Windows右键菜单效果代码
Oct 22 #Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 #Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 #Javascript
You might like
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
PHP无限分类的类
2007/01/02 PHP
用php的ob_start来生成静态页面的方法分析
2011/03/09 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
JsDom 编程小结
2011/08/09 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
javascript向后台传送相同属性的参数即数组参数
2014/02/17 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
jQuery实现简单的抽奖游戏
2017/05/05 jQuery
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
深入理解Vue 组件之间传值
2018/08/16 Javascript
vue登录注册实例详解
2019/09/14 Javascript
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
在vue中实现给每个页面顶部设置title
2020/07/29 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
在Python中处理日期和时间的基本知识点整理汇总
2015/05/22 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
什么叫做SQL注入,如何防止
2016/10/04 面试题
Shell编程面试题
2016/05/29 面试题
《与象共舞》教学反思
2014/02/24 职场文书
四风问题查摆剖析材料
2014/10/11 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript
python数字图像处理之图像的批量处理
2022/06/28 Python