使用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 性能优化手册 推荐
Feb 23 Javascript
JavaScript中的单引号和双引号报错的解决方法
Sep 01 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
node.js中的fs.fchmod方法使用说明
Dec 16 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 Javascript
js轮播图代码分享
Jul 14 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
mock.js模拟数据实现前后端分离
Jul 24 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 Javascript
微信小程序APP的生命周期及页面的生命周期
Apr 19 Javascript
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
php Try Catch异常测试
2009/03/01 PHP
phpmyadmin 3.4 空密码登录的实现方法
2010/05/29 PHP
PHP多线程类及用法实例
2014/12/03 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
JavaScript库 开发规则
2009/01/31 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
JS中的数组方法笔记整理
2016/07/26 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
ExtJs整合Echarts的示例代码
2018/02/27 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
jquery使用echarts实现有向图可视化功能示例
2019/11/25 jQuery
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
React生命周期原理与用法踩坑笔记
2020/04/28 Javascript
Python 初始化多维数组代码
2008/09/06 Python
深入浅出分析Python装饰器用法
2017/07/28 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
Python学习笔记之open()函数打开文件路径报错问题
2018/04/28 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
Square Off美国/加拿大:世界上最聪明的国际象棋棋盘
2018/12/06 全球购物
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
优秀导游先进事迹材料
2014/01/25 职场文书
工商管理专业自荐信
2014/06/03 职场文书
讲党性心得体会
2014/09/03 职场文书
CAD实训总结范文
2015/08/03 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang