使用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应用:Iframe自适应其加载的内容高度
Apr 10 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
May 24 Javascript
对比分析json及XML
Nov 28 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
复杂的javascript窗口分帧解析
Feb 19 Javascript
三种Node.js写文件的方式
Mar 08 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
Sep 01 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 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
火车采集器 免费版使出收费版本功能实现原理
2009/09/17 PHP
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
用PHP代码给图片加水印
2015/07/01 PHP
ThinkPHP实现静态缓存和动态缓存示例代码
2017/05/02 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
jquery中动态效果小结
2010/12/16 Javascript
查看大图功能代码jquery版
2013/11/05 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
javascript实现状态栏中文字动态显示的方法
2015/10/20 Javascript
老生常谈JavaScript 函数表达式
2016/09/01 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
2019/02/18 Javascript
js动态获取时间的方法分析
2019/08/02 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
2020/03/10 Javascript
[02:14]完美“圣”典2016风云人物:xiao8专访
2016/12/01 DOTA
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python实现测试磁盘性能的方法
2015/03/12 Python
Python字典操作简明总结
2015/04/13 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
Python基础教程之利用期物处理并发
2018/03/29 Python
python DataFrame获取行数、列数、索引及第几行第几列的值方法
2018/04/08 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
python中报错&quot;json.decoder.JSONDecodeError: Expecting value:&quot;的解决
2019/04/29 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
pytorch数据预处理错误的解决
2020/02/20 Python
Python collections模块的使用方法
2020/10/09 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
东方通信股份有限公司VC面试题
2014/08/27 面试题
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL