使用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加密解密7种方法总结分析
Oct 07 Javascript
javascript 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
js实现汉字排序的方法
Jul 23 Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 Javascript
js实现浏览器倒计时跳转页面效果
Aug 12 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 Javascript
vue服务端渲染的实例代码
Aug 28 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 Javascript
Vue函数式组件的应用实例详解
Aug 30 Javascript
小程序接入腾讯位置服务的详细流程
Mar 03 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使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
PHP实现动态压缩js与css文件的方法
2018/05/02 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
js微信分享API
2020/10/11 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
2017/06/28 jQuery
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
详解滑动穿透(锁body)终极探索
2019/04/16 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
Vue.js的模板语法详解
2020/02/16 Javascript
python client使用http post 到server端的代码
2013/02/10 Python
python绘制热力图heatmap
2020/03/23 Python
Python 实现微信自动回复的方法
2020/09/11 Python
jupyter 添加不同内核的操作
2021/02/06 Python
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
英国电子专家:maplin
2019/09/04 全球购物
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
机电工程学生自荐信范文
2013/12/07 职场文书
检察官就职演讲稿
2014/01/13 职场文书
幼儿教师工作感言
2014/02/14 职场文书
招聘专员岗位职责
2014/03/07 职场文书
搞笑征婚广告词
2014/03/17 职场文书
企业文化标语大全
2014/06/10 职场文书
社区志愿者活动方案
2014/08/18 职场文书
试用期转正员工自我评价
2014/09/18 职场文书
教师年度个人总结
2015/02/11 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
九年级英语教学反思
2016/02/15 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技