Javascript生成二维码（QR）
网络上已经有非常多的二维码编码和解码工具和代码，很多都是服务器端的，也就是说需要一台服务器才能提供二维码的生成。本着对服务器性能的考虑，这种小事情都让服务器去做，感觉对不住服务器，尤其是对于大流量的网站，虽然有服务器端缓存，毕竟需要大量的CPU运算时间，这或多或少也是很大的一块压力。所以就想，有没有一种不靠服务器，就只靠JS就生成二维码呢，毕竟二维码就是一堆黑白点而已。我也没有刻意去找网络上是否已经存在这样的解决方案，而且自己一直想深入分析二维码的生成细节，现有的项目也有这样的需求，于是我自己研究了下，写下了这么个qr.js。
大家可以从这个地址下载：http://files.cnblogs.com/JerryWeng/qr.js
先看看这个东西的效果：
它有两种输出模式：
第一种是直接通过<img>对于base64的支持，把二维码数据转成一个bmp编码的base64数据字符串作为<img>的src：
第二种是把每个点做成一个div，然后通过css变成一个黑白点的矩阵
这是测试的HTML代码：
<!DOCTYPE html>
<html>
<head>
<script src="./jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="./qr.js" type="text/javascript"></script>
<script type="text/javascript">
var qr_coder = null;
$(document).ready(function(){
qr_coder = new QRCoder($('#qr_container'));
$('#qr_gen').click(function()
{
$('#qr_container').html("generating"); var watch_start=new Date();
qr_coder.setMode(1);
qr_coder.draw(
$('#qr_link').val(),
$("[name='qr_capacity']:checked").val(),
'icon.png',
function(data)
{
var watch_end=new Date();
console.log("cost:"+(watch_end-watch_start)+"ms"); });
});
});
</script> </head>
<body>
<h1>QR CODER</h1>
<div style="margin:auto; position:relative; margin-left: 50%; left: -250px; width:500px;">
<label for="qr_link">URL:</label>
<input id="qr_link" type="text" value="http://you.ctrip.com" style="width:350px;" />
<button id="qr_gen" value="Generate">Generate</button> <br />
<div style="display:none">
<input id="qr_capacity_l" name="qr_capacity" type="radio" value="L"/> <label for="qr_capacity_l">7%</label>
<input id="qr_capacity_m" name="qr_capacity" type="radio" value="M"/> <label for="qr_capacity_m">15%</label>
<input id="qr_capacity_q" name="qr_capacity" type="radio" value="Q"/> <label for="qr_capacity_q">25%</label>
<input id="qr_capacity_h" name="qr_capacity" type="radio" value="H" checked/> <label for="qr_capacity_h">30%</label>
</div>
</div>
<div id="qr_container" style="margin:auto; position:relative;"></div>
</body>
</html>
在IE6，7，8，9，10，Firefox，Chrome中测试通过。
如果对于实现细节感兴趣，下面我来详细说明如何实现。
一、参考文档
在开始之前，需要准备一些参考文档来帮助理解：
1, QR 国际标准 ISO/IEC 18004. (http://raidenii.net/files/datasheets/misc/qr_code.pdf)
2, http://coolshell.cn/articles/10590.html
3, Galois Field 伽罗华域 (参考度娘)
4, Reed Solomon 纠错编码 (参考度娘)
5, Bitmap 编码规范 （http://zh.wikipedia.org/wiki/Bitmap）
6, Base64 编码 （参考度娘）
二、流程
http://www.processon.com/view/link/537c20340cf27a0d78936e61
整个流程，步骤有点多，但其实并不复杂，其中大多数步骤在标准规范中已经说明，在参考文档2中，他已经把编码部分说的非常详细，我就不多赘述了，我在下面补充说下一些比较搞的概念。
三、说明
首先是伽罗华域，QR的纠错编码都是基于GF(256)的，GF的最大特性是它的封闭性，无论是加减乘除，它计算结果始终落在这个有限域中，并且GF256中的任何一个元素，都可以用GF2的组合来表示，也就是0，1表示，我们通过1+x^1+x^2+...+x^n这样的多项式来表示一个这个有限域中的数，其实，我们不用在意这里的x，我们只关心这个多项式的系数组合，每个x的指数代表系数所占的位数，比如x^8+x^6+x+1就对应二进制10100011,所以其实都是二进制的运算。GF256一共就256个数，我们可以生成好，然后以数组和哈希表的形式来参与计算，具体如何生成GF256的，大家可以参考下这篇wiki，http://en.wikipedia.org/wiki/Finite_field_arithmetic
然后是RS纠错编码，RS编码都是基于GF256的，所以，我们需要先熟悉GF256的运算方法，RS编码说简单了，就是首先知道我需要有多少个纠错的codeblock，然后以这个数构造一个生成多项式:(x-a^0)(x-a^1)...(x-a^n-1)，这里的a，或叫alpha，就是GF256里的底数，a^n-1代表一个GF256有限域中元素，这里的n就是纠错codeblock的个数，然后把要编码的数据codeblocks组成一个类似的多项式，每个codeblock的值就是多项式的系数，从高位到低位排列，用这个数据多项式除以生成多项式，然后取余数，这个余数也应该是在GF256里的数，其实就是手工法取余，这些运算方法在GF的那篇wiki里也有说明，详细也可参见这篇wiki：http://en.wikipedia.org/wiki/Reed–Solomon_error_correction
再说下mask的问题，最后编码后的数据，为了能够尽量地分散黑点和白点的分布，便于扫描器扫描，需要每个数据位与某种mask做XOR，为什么不是固定的mask呢，因为没法用一种mask分散所有的编码。规范中列举了8种mask函数，这些函数，只要符合，就返回1，否则是0，然后每个对应的数据位（x,y）代入这个函数，然后再和相应的数据位XOR，这里的x代表列号，y代表行号，左上角是0点，规范中的i代表的是行号，j代表的是列号，这点要注意。然后我们要从8个mask函数中选择一个最合适的，选择方法是分别和4种决策方法并根据其权重计算一个分数并求和，选取这个得分最低的mask就是我们要用的mask。这4种决策方法和权重在规范中有列举，稍微看下，不难理解。其实这部操作也是最耗性能的，因为必须要做8*4次计算，而且每次计算要扫描整个数据阵列。其实前3种决策方法算起来还都好，最麻烦的是最后种，要计算m*n同色块，每次出现需要加(m-1)*(n-1)*3,这个计算我没有找到一个比较理想的算法，我变通的做法是，只计算出现机率最多的小块矩形，2<=m<6,2<=n<6的共16种矩形，其实结果计算的差不了多少。其实不是说没有算对就完全扫不出来，这个选取操作可以让生成的二维码最优化而已。这个操作在客户端大概在百ms级别的，其实用户是感受不到它的生成过程，但是如果这个操作放在服务器端，可想而知压力之大。
Javascript生成二维码（QR）的更多相关文章
- 使用JavaScript生成二维码教程-附qrcodejs中文文档
使用javascript生成二维码 依赖jquery 需要使用到的库 https://github.com/davidshimjs/qrcodejs DIV <div id="qrco ...
- 前端生成二维码 - Javascript生成二维码（QR）
前段时间项目中需要动态的生成二维码,经过评估,前后端生成都可以.但后端生成会有两个问题: 没有找到正规发布出来的后端开源库. 二维码图片,会随着商品的增加而不断变多. 基于以上两个问题,决定在前端生成 ...
- QRCode.js：使用 JavaScript 生成二维码
什么是 QRCode.js? QRCode.js 是一个用于生成二维码的 JavaScript 库.主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库. 基本用法 ...
- JavaScript生成二维码图片
1.引入一个二维码工具的js文件,同时需要引入jquery文件 下面是jquery.qrcode.min.js文件内容: (function(r){r.fn.qrcode=function(h){va ...
- QrCode C#生成二维码 及JavaScript生成二维码
一 C#的二维码 示例: class Program { static void Main(string[] args) { QrEncoder qrEncoder = new QrEncode ...
- 用ABAP 生成二维码 QR Code
除了使用我的这篇blogStep by step to create QRCode in ABAP Webdynpro提到的使用ABAP webdynpro生成二维码之外,也可以通过使用二维码在线生成 ...
- javaScript生成二维码（支持中文，生成logo）
资料搜索 选择star最多的两个 第一个就是用的比较多的jquery.qrcode.js(但不支持中文,不能带logo)啦,第二个支持ie6+,支持中文,根据第二个源代码,使得,jquery.qrco ...
- javascript生成二维码
参考: http://www.w3dev.cn/article/20140617/javascript-create-QR-code.aspx
- 使用jQuery的插件qrcode生成二维码（静态+动态生成）及常见问题解决方法
一.简介 1.说明 qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式,您可以到https://github.com/jeromeetienn ...
随机推荐
- 【知识必备】内存泄漏全解析，从此拒绝ANR，让OOM远离你的身边，跟内存泄漏say byebye
一.写在前面 对于C++来说,内存泄漏就是new出来的对象没有delete,俗称野指针:而对于java来说,就是new出来的Object放在Heap上无法被GC回收:而这里就把我之前的一篇内存泄漏的总 ...
- “四核”驱动的“三维”导航 -- 淘宝新UI（需求分析篇）
前言 孔子说:"软件是对客观世界的抽象". 首先声明,这里的"三维导航"和地图没一毛钱关系,"四核驱动"和硬件也没关系,而是为了复杂的应用而 ...
- Shell碎碎念
1. 字符串如何大小写转换 str="This is a Bash Shell script." 1> tr方式 newstr=`tr '[A-Z]' '[a-z]' < ...
- 《JavaScript设计模式与开发实践》整理
最近在研读一本书<JavaScript设计模式与开发实践>,进阶用的. 一.高阶函数 高阶函数是指至少满足下列条件之一的函数. 1. 函数可以作为参数被传递. 2. 函数可以作为返回值输出 ...
- ES6的一些常用特性
由于公司的前端业务全部基于ES6开发,于是给自己开个小灶补补ES6的一些常用特性.原来打算花两天学习ES6的,结果花了3天才勉强过了一遍阮老师的ES6标准入门(水好深,ES6没学好ES7又来了...) ...
- 阿里云学生优惠Windows Server 2012 R2安装IIS，ftp等组件，绑定服务器域名，域名解析到服务器，域名备案，以及安装期间错误的解决方案
前言: 这几天终于还是按耐不住买了一个月阿里云的学生优惠.只要是学生,在学信网上注册过,并且支付宝实名认证,就可以用9块9的价格买阿里云的云服务ECS.确实是相当的优惠. 我买的是Windows S ...
- javascript之闭包理解以及应用场景
半个月没写博文了,最近一直在弄小程序,感觉也没啥好写的. 之前读了js权威指南,也写了篇博文,但是实话实说当初看闭包确实还是一头雾水.现在时隔一个多月(当然这一段时间还是一直有在看闭包的相关知识)理解 ...
- Android Retrofit 2.0 使用-补充篇
推荐阅读,猛戳: 1.Android MVP 实例 2.Android Retrofit 2.0使用 3.RxJava 4.RxBus 5.Android MVP+Retrofit+RxJava实践小 ...
- Linux实战教学笔记02:计算机系统硬件核心知识
标签(空格分隔):Linux实战教学笔记-陈思齐 第1章 互联网企业常见服务器介绍 1.1 互联网公司服务器品牌 - DELL(大多数公司,常用) - HP - IBM(百度在用) 浪潮 联想 航天联 ...
- PHP 数组浅析
PHP的数组具有如下特点:1.数组初始化时无需指定长度:2.数组中的元素无需相同类型:3.数组的长度可变4.可使用var_dump(参数)或者print_r( 参数) 函数查看数组变量.5.数组内的 ...