jquery.qrcode.js 是居于jquery类库的绘制二维码的插件，用它来实现二维码图形渲染支持canvas和table两种绘图方式。
（jquery.qrcode.js 设置显示方式为table时在webkit核心浏览器如chrome下会变形）

以下是测试代码（增加了颜色控制，可以设置4个区块的颜色值，需要指定render为table。），效果:
jquery.qrcode生成彩色二维码" src="http://www.jbxue.com/d/file/2014/08/20140808213149602.jpg" height="149" width="217">

完整代码：

复制代码 代码示例:
<html>
<head>
<title>JS生成二维码-www.jbxue.com</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));
   } // www.jbxue.com
  }
  return out;
 }
</script>
 
</body>
</html>
 

代码说明：
jquery-qrcode这个库是采用 charCodeAt这个方式进行编码转换的，而这个方法默认会获取它的 Unicode 编码，一般的解码器都是采用UTF-8, ISO-8859-1等方式，英文是没有问题，如果是中文，一般情况下Unicode是UTF-16实现，长度2位，而UTF-8编码是3位，这样二维码的编解码就不匹配了。
 
解决方法：
在二维码编码前把字符串转换成UTF-8，具体代码如上utf16to8函数所示。

转载 http://www.jbxue.com/article/24133.html  收藏一下

jquery.qrcode二维码插件生成彩色二维码的更多相关文章

  1. jQuery.qrcode二维码插件生成网页二维码

    如果是一个固定的二维码,我们只需要在网上找个地方生成图片,然后放上图片就可以了.但如果是地址不固定需要根据页面来生成的话.就有两种做法,一个是后端根据页面做一个动态的二维码.一种是前端使用插件生成. ...

  2. Android之自定义生成彩色二维码

    先导个zxing.jar包 下面是xml布局 activity_main.xml <RelativeLayout xmlns:android="http://schemas.andro ...

  3. Swift开发小技巧--扫描二维码,二维码的描边与锁定,设置扫描范围,二维码的生成(高清,无码,你懂得!)

    二维码的扫描,二维码的锁定与描边,二维码的扫描范围,二维码的生成(高清,无码,你懂得!),识别相册中的二维码 扫描二维码用到的三个重要对象的关系,如图: 1.懒加载各种类 // MARK: - 懒加载 ...

  4. idea字节码插件JClassLib——阅读JVM字节码

    idea字节码插件JClassLib--阅读JVM字节码 生成字节码文件并查看 查看字节码文件的方式:javac 文件名.java 即可生成.class文件,但是这种方式不方便 java:是运行字节码 ...

  5. jquery插件生成简单二维码

    除了利用第三方网站生成二维码外,这是一个比较简单的办法吧. <script src="/Scripts/jquery.qrcode.min.js" type="te ...

  6. QRCode.js：使用 JavaScript 生成微信二维码

    https://www.runoob.com/w3cnote/javascript-qrcodejs-library.html 什么是 QRCode.js? QRCode.js 是一个用于生成二维码的 ...

  7. 深挖JDK动态代理(二)：JDK动态生成后的字节码分析

    接上一篇文章深挖JDK动态代理(一)我们来分析一下JDK生成动态的代理类究竟是个什么东西 1. 将生成的代理类编程一个class文件,通过以下方法 public static void transCl ...

  8. JQuery的二维码插件

    jquery.qrcode.js 只有能重新生成的二维码才是安全的,大牛做了插件,满足我们吃糖的需求: 用法(除了翻译git上的readme我一下子想不到还能写点什么) 引用 <script t ...

  9. 使用jquery.qrcode生成二维码实现微信分享功能

    前言: 最近有个这样的需求,在pc端的商品详情页增加分享功能. 微博分享.QQ好友分享.QQ空间分享这些都很常见.但是微信分享我还没有手动写过(以前改过). 最终效果如下图: 解决方案:使用jquer ...

随机推荐

  1. CSS权威指南学习笔记 —— HTML元素分类

    HTML文档由各种元素组成.比如,p.table.span等等.每个元素都会对文档的表现有所影响.CSS中,每个元素都会生成一个框(传说中的盒子),其中包含元素内容. 元素可以根据它的创建方式分为两种 ...

  2. 无法识别的属性“targetFramework”

    问题描述:无法识别的属性“targetFramework”.请注意属性名称区分大小写. 解决办法:修改.NET Framework 版本为相应版本即可,例如2.0换成4.0. 参考:http://bl ...

  3. 第一章ASP.NET SignalR简介

    第一章ASP.NET SignalR简介 1.1概述: ASP.NET SignalR是微软新开发的类库,为的是帮助ASP.NET开发人员很方便地开发实时网络功能. SignalR允许服务器端和客户端 ...

  4. linux循环递归设置权限

    这里给出一个循环递归得到对文件夹和文件分别有效的设置方法: find /path -type f -exec chmod 644 {} \; #对目录和子目录里的文件 find /path -type ...

  5. Mantis 缺陷管理系统配置与安装[Z]

    什么是Mantis MantisBT is a free popular web-based bugtracking system (feature list). It is written in t ...

  6. 关于JPA多数据源的部署persistence.xml文件配置以及对应实现类注入

      <?xml version="1.0" encoding="UTF-8"?> <persistence xmlns="http: ...

  7. BST的删除

    #include<iostream> #include<math.h> #include<stdio.h> #include<stdlib.h> #in ...

  8. hdu4753

    很简单的位模拟(bit-mask),可惜队友读题误以为很难,没有及时跟我交流,不然应该很早就可以出了. 很容易看出来,总共才16个点.24条边.用一个int类型数字就可以描述这个图了,按照16点的关系 ...

  9. The method replace(int, Fragment, String) in the type FragmentTransaction is not applicable for the arguments (int, SettingFragment, String)

    The method replace(int, Fragment, String) in the type FragmentTransaction is not applicable for the ...

  10. 使用bootstrap做一个响应式的页面

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...