使用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 相关文章推荐
javascript 伪数组实现方法
Oct 11 Javascript
Node.js实战 建立简单的Web服务器
Mar 08 Javascript
33个优秀的 jQuery 图片展示插件分享
Mar 14 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
Jul 07 Javascript
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
bootstrap轮播模板使用方法详解
Nov 17 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 Javascript
vue实现图片懒加载的方法分析
Feb 05 Javascript
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
vuex中store存储store.commit和store.dispatch的用法
Jul 24 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
德生1994机评
2021/03/02 无线电
SONY ICF-F10中波修复记
2021/03/02 无线电
PHP 字符串操作入门教程
2006/12/06 PHP
php 抽象类的简单应用
2011/09/06 PHP
各种快递查询--Api接口
2016/04/26 PHP
记Laravel调用Gin接口调用formData上传文件的实现方法
2019/12/12 PHP
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
2014/02/13 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
javascript实现类似java中getClass()得到对象类名的方法
2015/07/27 Javascript
AngularJS基础教程之简单介绍
2015/09/27 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
2019/12/02 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
小程序实现点击tab切换左右滑动
2020/11/16 Javascript
python实现下载指定网址所有图片的方法
2015/08/08 Python
Python编程修改MP3文件名称的方法
2017/04/19 Python
Ubuntu安装Jupyter Notebook教程
2017/10/18 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
PyQt5实现暗黑风格的计时器
2019/07/29 Python
python 接口实现 供第三方调用的例子
2019/08/13 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
CSS3地图动态实例代码(圆圈向外扩散)
2018/06/15 HTML / CSS
理肤泉俄罗斯官网:La Roche-Posay俄罗斯
2018/07/24 全球购物
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
《骑牛比赛》教后反思
2014/04/22 职场文书
学生会主席演讲稿
2014/04/25 职场文书
国际贸易求职信
2014/07/05 职场文书
船舶工程技术专业求职信
2014/08/07 职场文书
Python图片验证码降噪和8邻域降噪
2021/08/30 Python