使用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 相关文章推荐
JS获取scrollHeight问题想到的标准问题
May 27 Javascript
TextArea不支持maxlength的解决办法(jquery)
Sep 13 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
Feb 07 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 Javascript
Javascript基础教程之if条件语句
Jan 18 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
js H5 canvas投篮小游戏
Aug 18 Javascript
jquery popupDialog 使用 加载jsp页面的方法
Oct 25 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
Sep 01 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插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
fckeditor上传文件按日期存放及重命名方法
2015/05/22 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
JavaScript Prototype对象
2009/01/07 Javascript
javascript 二分法(数组array)
2010/04/24 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
Js 获取Gridview选中行的内容操作步骤
2013/02/05 Javascript
javascript中的括号()用法小结
2014/04/14 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
便捷提取python导入包的属性方法
2018/10/15 Python
详解python和matlab的优势与区别
2019/06/28 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
总结30个CSS3选择器
2017/04/13 HTML / CSS
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
商务英语专业应届毕业生求职信
2013/10/28 职场文书
关于期中考试的反思
2014/02/02 职场文书
英语教师岗位职责
2014/03/16 职场文书
信息管理专业自荐书
2014/06/05 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
入党申请书怎么写?
2019/06/21 职场文书