使用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 相关文章推荐
JS效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
javascript Keycode对照表
Oct 24 Javascript
jQuery 获取对象 定位子对象
May 31 Javascript
JQuery设置文本框和密码框得到焦点时的样式
Aug 30 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
Nov 29 Javascript
jQuery事件处理的特征(事件命名机制)
Aug 23 Javascript
ES6记录异步函数的执行时间详解
Aug 31 Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 Javascript
原生JavaScript实现AJAX、JSONP
Feb 07 Javascript
vue axios整合使用全攻略
May 24 Javascript
JS实现的排列组合算法示例
Jul 16 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与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
PHP生成随机字符串实例代码(字母+数字)
2019/09/11 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
javascript倒计时功能实现代码
2012/06/07 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
vue-resource:jsonp请求百度搜索的接口示例
2019/11/09 Javascript
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
Python求算数平方根和约数的方法汇总
2016/03/09 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
深入理解Django的中间件middleware
2018/03/14 Python
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
python读取xlsx的方法
2018/12/25 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
英国领先的在线药房:Pharmacy First
2017/09/10 全球购物
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
飘柔洗发水广告词
2014/03/14 职场文书
保证书格式
2015/01/16 职场文书
初中信息技术教学计划
2015/01/22 职场文书
匿名检举信范文
2015/03/02 职场文书
个人承诺书格式范文
2015/04/29 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python
Python实现打乒乓小游戏
2021/09/25 Python
JS数组方法some、every和find的使用详情
2021/10/05 Javascript