使用jquery.qrcode生成彩色二维码实例


Posted in Javascript onAugust 08, 2014

jquery.qrcode.js 是居于jquery类库的绘制二维码的插件,用它来实现二维码图形渲染支持canvas和table两种绘图方式。(jquery.qrcode.js 设置显示方式为table时在webkit核心浏览器如chrome下会变形,这个需要注意。)

下面为测试代码(增加了颜色控制,可以设置4个区块的颜色值,需要指定render为table。),效果如下:

使用jquery.qrcode生成彩色二维码实例

代码如下:

<html>
<head>
<title>JS生成二维码</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
<style>
 #output{
 margin-left:300px; 
 margin-top:100px; 
 }
</style>
</head>
<body>
<div id="output"></div>
<script>
 window.onload = function () {
 var trs = $('#output').qrcode({
  width: 100,
  height: 100,
  render: "canvas", //设置渲染方式 table canvas
  text: utf16to8("javascript生成二维码"),
  background: "#ffffff", //背景颜色 
  foreground: "red" //前景颜色 
 }).find('tr'), trLen = Math.floor(trs.size() / 2), tdLen = Math.floor(trs.eq(0).find('td').size() / 2), tds, bgColor;
 var colors = [['#ff0000', '#0100e2'], ['#00ed01', '#9f4d95']];
 trs.each(function (j) {
  tds = $(this).find('td');
  tds.each(function (i) {
  bgColor = this.style.backgroundColor;
  if (bgColor == 'red') {
   this.style.backgroundColor = colors[j < trLen ? 0 : 1][i < tdLen ? 0 : 1];
  }
  });
 });
 }
 function utf16to8(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;
 } 
</script>
 
</body>
</html>

jquery-qrcode这个库是采用 charCodeAt这个方式进行编码转换的,而这个方法默认会获取它的 Unicode 编码,一般的解码器都是采用UTF-8, ISO-8859-1等方式,英文是没有问题,如果是中文,一般情况下Unicode是UTF-16实现,长度2位,而UTF-8编码是3位,这样二维码的编解码就不匹配了。
 
解决方式:在二维码编码前把字符串转换成UTF-8,具体代码如上utf16to8函数

PS:本站还提供了一个功能非常强大的二维码生成工具,感兴趣的朋友可以参考一下:

Javascript 相关文章推荐
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
javascript实现yield的方法
Nov 06 Javascript
js的toUpperCase方法用法实例
Jan 27 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
聊一聊JS中的prototype
Sep 29 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
实现单层json按照key字母顺序排序的示例
Dec 06 Javascript
angularjs使用div模拟textarea文本框的方法
Oct 02 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
Jun 05 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
Aug 08 #Javascript
js调试工具console.log()方法查看js代码的执行情况
Aug 08 #Javascript
JS创建类和对象的两种不同方式
Aug 08 #Javascript
将HTML格式的String转化为HTMLElement的实现方法
Aug 07 #Javascript
jquery datatable后台封装数据示例代码
Aug 07 #Javascript
jquery对象和javascript对象即DOM对象相互转换
Aug 07 #Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
Aug 07 #Javascript
You might like
php操作xml
2013/10/27 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
php简单实现多语言切换的方法
2016/05/09 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
IE下js调试工具Companion.JS
2010/10/15 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
2013/10/23 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
jQuery实现给input绑定回车事件的方法
2017/02/09 Javascript
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
layui关闭层级、简单监听的实例
2019/09/06 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
python实现颜色空间转换程序(Tkinter)
2015/12/31 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
python实现旋转和水平翻转的方法
2018/10/25 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
Python使用scrapy爬取阳光热线问政平台过程解析
2019/08/14 Python
python实现的登录与提交表单数据功能示例
2019/09/25 Python
使用Tkinter制作信息提示框
2020/02/18 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
Django自定义YamlField实现过程解析
2020/11/11 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
我读书我快乐演讲稿
2014/05/07 职场文书
体育个人工作总结
2015/02/09 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
小学同学聚会感言
2015/07/30 职场文书
广告策划的实习心得体会总结!
2019/07/22 职场文书