使用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中通过URL传递汉字的方法
Apr 09 Javascript
JS实现时间格式化的方式汇总
Oct 16 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
Oct 25 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
node.js中的fs.stat方法使用说明
Dec 16 Javascript
轻松实现Bootstrap图片轮播
Apr 20 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
Jun 14 Javascript
AngularJs中$cookies简单用法分析
May 30 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
Vue中el-form标签中的自定义el-select下拉框标签功能
Apr 20 Javascript
一篇文章带你从零快速上手Rollup
Sep 07 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
PHP4 与 MySQL 数据库操作函数详解
2006/12/06 PHP
小偷PHP+Html+缓存
2006/12/20 PHP
php 计划任务 检测用户连接状态
2012/03/29 PHP
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
CI框架Session.php源码分析
2014/11/03 PHP
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
jquery插件之easing 动态菜单
2010/08/21 Javascript
jQuery表单验证插件formValidator(改进版)
2012/02/03 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
JQuery删除DOM节点的方法
2015/06/11 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
Vue组件化开发思考
2018/02/02 Javascript
vue修改对象的属性值后页面不重新渲染的实例
2018/08/09 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
Vue 幸运大转盘实现思路详解
2019/05/06 Javascript
原生JS运动实现轮播图
2021/01/02 Javascript
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
python 网络编程常用代码段
2016/08/28 Python
完美解决Python2操作中文名文件乱码的问题
2017/01/04 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
无法使用pip命令安装python第三方库的原因及解决方法
2018/06/12 Python
python批量创建指定名称的文件夹
2019/03/21 Python
python:动态路由的Flask程序代码
2019/11/22 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
Python装饰器用法与知识点小结
2020/03/09 Python
Python实现验证码识别
2020/06/15 Python
大专自我鉴定范文
2013/10/01 职场文书
汽车维修求职信
2014/06/15 职场文书
525心理健康活动总结
2015/05/08 职场文书
2019辞职报告范本3篇!
2019/07/23 职场文书
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python