使用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 相关文章推荐
JavaScript 新手24条实用建议[TUTS+]
Jun 21 Javascript
ExtJs的Date格式字符代码
Dec 30 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
Jan 06 Javascript
javascript生成json数据简单示例分享
Feb 14 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
js中取得变量绝对值的方法
Jan 03 Javascript
浅谈javascript的调试
Jan 28 Javascript
Js+php实现异步拖拽上传文件
Jun 23 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
Jul 31 Javascript
koa上传excel文件并解析的实现方法
Aug 09 Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 18 Javascript
使用Canvas绘制一个游戏人物属性图
Mar 25 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的ddos攻击解决方法
2015/01/08 PHP
php include类文件超时问题处理
2015/02/06 PHP
php插入含有特殊符号数据的处理方法
2016/11/24 PHP
写的htc的数据表格
2007/01/20 Javascript
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
页面载入结束自动调用js函数示例
2013/09/23 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
同步异步动态引入js文件的几种方法总结
2016/09/23 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
JS使用tofixed与round处理数据四舍五入的区别
2017/10/25 Javascript
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
js实现表单项的全选、反选及删除操作示例
2020/06/05 Javascript
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
开始着手第一个Django项目
2015/07/15 Python
Python中%r和%s的详解及区别
2017/03/16 Python
Python文本特征抽取与向量化算法学习
2017/12/22 Python
浅析Python函数式编程
2018/10/06 Python
python打开使用的方法
2019/09/30 Python
Python递归调用实现数字累加的代码
2020/02/25 Python
Python日志处理模块logging用法解析
2020/05/19 Python
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
Html5页面获取微信公众号的openid的方法
2020/05/12 HTML / CSS
数据库面试要点基本概念
2013/10/31 面试题
幼儿园教研活动总结
2014/04/30 职场文书
校园演讲稿汇总
2014/05/21 职场文书
2015年度保密工作总结
2015/04/24 职场文书
python常见的占位符总结及用法
2021/07/02 Python
使用CSS实现小三角边框原理解析
2021/11/07 HTML / CSS
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python
Python如何用re模块实现简易tokenizer
2022/05/02 Python
spring boot实现文件上传
2022/08/14 Java/Android