图像处理之二维码生成-qr
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级别的，其实用户是感受不到它的生成过程，但是如果这个操作放在服务器端，可想而知压力之大。
http://www.cnblogs.com/JerryWeng/p/3740744.html
图像处理之二维码生成-qr的更多相关文章
- 二维码（QR code）基本结构及生成原理
什么是二维码 二维码 (2-dimensional bar code),是用某种特定的几何图形按一定规律在平面(二维方向上)分布的黑白相间的图形记录数据符号信息的. 在许多种类的二维条码中,常用的码制 ...
- (转)QR二维码生成及原理
二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能表示更多的数据类型:比如:字符,数字, ...
- PHP QR Code封装二维码生成教程
今天搞了一下二维码封装在tp框架上运用. 找了下草料网, api接口要收费, 现在找到了两种方法来实现用PHP来实现创建二维码. 由于二维码生成,会使用到PHP的GD库, 我们要先在PHP.ini文件 ...
- 后端生成二维码 - C#生成二维码（QR）
最近在github上找到一个相对比较好的C#二维码生成类库.在这里和大家分享一下. github地址:https://github.com/codebude/QRCoder 把解决方案下载下来,编译生 ...
- C# 生成二维码（QR Code）
参考: C#通过ThoughtWorks.QRCode生成二维码(QR Code) 通过ThoughtWorks.QRCode(ThoughtWorks.QRCode.dll)来实现 1) ...
- android 二维码生成+扫描
android 二维码生成+扫描 1.在Android应用当中,很多时候都要用到二维码扫描,来避免让用户手动输入的麻烦. Google官方自己推出了一个二维码开源项目:ZXing库. 2.这里简单介绍 ...
- Atitit 常用二维码对比(QR、PDF417、DM、汉信码 Aztec code maxicode
Atitit 常用二维码对比(QR.PDF417.DM.汉信码 Aztec code maxicode DM码则更"小",可在仅仅25mm²的面积上编码30个数字.但也就是因为太小 ...
- [开源]C#二维码生成解析工具，可添加自定义Logo
二维码又称 QR Code,QR 全称 Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的 Bar Code 条形码能存更多的信息,也能表示更多的数据类型:比如:字 ...
- iOS开发 二维码生成
基于libqrencode的二维码生成 + (void)drawQRCode:(QRcode *)code context:(CGContextRef)ctx size:(CGFloat)size { ...
随机推荐
- volist 自增序号 分页如何实现？
TP框架模板中如何生成自增数据 {$_GET['p']*10-10+$i} /* 分页序号计算 */ function addnum($k,$num){ return ($k +1 ) ...
- 我们为什么在移动端项目中选择jQuery而不是Zepto
1.文件大小比较 首先从cnd上(http://www.bootcdn.cn/)下载jquery和zepto. jquery下载的是2.2.4版本压缩: zepto下载的是是1.20压缩版本: 二个文 ...
- java 资源文件的读取
Java将配置文件当作一种资源(resource)来处理,并且提供了两个类来读取这些资源,一个是Class类,另一个是ClassLoader类. gradle 项目 项目目录结构 用Class类加载 ...
- DBCP( 二) DataBase Connection Pool 的使用
使用DBCP必须用的三个包: commons-dbcp-1.2.1.jar, commons-pool-1.2.jar, commons-collections-3.1.jar. 配置参数. Java ...
- 基于spring-boot的社区社交微信小程序，适合做脚手架、二次开发
基于spring-boot的社区社交微信小程序,适合做脚手架.二次开发 代码地址如下:http://www.demodashi.com/demo/13867.html 1 概述 笔者做的一个后端基于s ...
- mini2440裸机试炼之——看门狗中断和复位操作
看门狗的工作原理: 设本系统程序完整执行一周期的时间是Tp,看门狗的定时周期为Ti,Ti>Tp,在程序正常执行时,定时器就不会溢出,若因为干扰等原因使系统不能在Tp时刻改动定时器的记数值,定时器 ...
- AI的分支学科
AI 的分支学科 [References]AAI(Advanced Artificial Intelligence)
- Linux命令-目录处理命令:rmdir
rmdir /tmp/shijiazhuang/yuhuaqu 删除一个子目录(必须是空目录) rmdir /tmp/shijiazhuang 删除一个不为空的目录会失败
- Redis总结（三）Redis 的主从复制(转载)
接着上一篇,前面两篇我总结了<Redis总结(一)Redis安装>和<Redis总结(二)C#中如何使用redis> 所以这一篇,会讲讲Redis 的主从复制以及C#中如何调用 ...
- 如何在IIS7或IIS7.5中导入导出站点及应用程序池. -摘自网络
为实现负载平衡,我们可能会使用多个WEB服务器,也就会需要给多个IIS配置同样的站点和应用程序池.那么我们需要一个一个的重新建吗?当然不用,我们只需要一些简单的命令就可以在IIS7(Windows S ...