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


Posted in Javascript onOctober 17, 2016

二维码应用已经渗透到我们的生活工作当中,您只需要用手机对着二维码“扫一扫”即可获得所对应的信息,方便我们了解商家、购物、观影等等。本文将介绍一款基于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> 
 //任意字符串 生成二维码 
 //默认使用Canvas画图 
 $('#code').qrcode('http://blog.csdn.net/u011127019'); 
</script>

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

简单实例2:

<div id="code"></div> 
<script> 
 //table 模式兼容 IE低版本 
 $('#code').qrcode({ 
  render: 'table', 
  width: 100, 
  height: 100, 
  text: 'http://blog.csdn.net/u011127019' 
 }); 
</script>

简单实例3(中文支持):

我们试验的时候发现不能识别中文内容的二维码,通过查找多方资料了解到,jquery-qrcode是采用charCodeAt()方式进行编码转换的。而这个方法默认会获取它的Unicode编码,如果有中文内容,在生成二维码前就要把字符串转换成UTF-8,然后再生成二维码。

<div id="code"></div> 
<script> 
 //如果内容中有中文,在生成二维码钱就要把字符串转换成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; 
 } 
 
 $('#code').qrcode({ 
  text: toUtf8('我是tianma'), 
  width: 150, 
  height: 150 
 }); 
 
 //就目前 微信/支付宝等 不识别其他颜色的二维码 
 $('#code').qrcode({ 
  text: toUtf8('我是tianma'), 
  width: 150, 
  height: 150, 
  background: '#f00', 
  foreground: '#0f0' 
 }); 
</script>

实例4:

//text 属性的值长度不能太长,最大字节数 10208 
//text 字符串太长 微信/支付宝等扫一扫无法识别,微博识别内容更多 
//微博扫一扫:大约200 字以内,微信扫一扫:大约 160字以内,支付宝扫一扫:大约130字符以内 
$('#code').qrcode({ 
 text: toUtf8('SignalR 是 ASP.NET 团队正在开发的一个 Microsoft .NET Framework 库和 jQuery 插件,可能包括在以后版本的 ASP.NET 平台中。 它提供了一些前景极为光明的功能,而这些功能正是,并且是越来越多的,当前不曾具有的,'), 
 width: 150, 
 height: 150 
});

希望本文所述对你有所帮助,使用jquery.qrcode.js生成二维码插件内容就给大家介绍到这里了。希望大家继续关注我们的网站!

Javascript 相关文章推荐
String.prototype实现的一些javascript函数介绍
Nov 22 Javascript
JS获取网页属性包括宽、高等等
Apr 03 Javascript
JS实现图片产生波纹一样flash效果的方法
Feb 27 Javascript
jQuery each函数源码分析
May 25 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
Aug 25 Javascript
概述javascript在Google IE中的调试技巧
Nov 24 Javascript
ajax级联菜单实现方法实例分析
Nov 28 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
Sep 11 Javascript
node的process以及child_process模块学习笔记
Mar 06 Javascript
Angular2中监听数据更新的方法
Aug 31 Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
Sep 07 Javascript
js浏览器html5表单验证
Oct 17 #Javascript
使用开源工具制作网页验证码的方法
Oct 17 #Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
Oct 17 #Javascript
JavaScript中的ajax功能的概念和示例详解
Oct 17 #Javascript
JQuery中解决重复动画的方法
Oct 17 #Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 #Javascript
原生JavaScript制作计算器
Oct 16 #Javascript
You might like
PHP 根据IP地址控制访问的代码
2010/04/22 PHP
php urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
[原创]保存的js无法执行的解决办法
2007/02/25 Javascript
收集的网上用的ajax之chat.js文件
2007/04/08 Javascript
Jquery 绑定时间实现代码
2011/05/03 Javascript
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
js读取cookie方法总结
2014/10/31 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
利用Python命令行传递实例化对象的方法
2016/11/02 Python
Python使用Matplotlib实现雨点图动画效果的方法
2017/12/23 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
python实现猜数游戏
2020/03/27 Python
Python datetime模块使用方法小结
2020/06/18 Python
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
CAD制图设计师自荐信
2014/01/29 职场文书
运动会演讲稿200字
2014/08/25 职场文书
意外伤害赔偿协议书范文
2014/09/23 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
小学四年级学生评语
2014/12/26 职场文书
集结号观后感
2015/06/08 职场文书
观后感开头
2015/06/19 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android