网络上已经有非常多的二维码编码和解码工具和代码,很多都是服务器端的,也就是说需要一台服务器才能提供二维码的生成。本着对服务器性能的考虑,这种小事情都让服务器去做,感觉对不住服务器,尤其是对于大流量的网站,虽然有服务器端缓存,毕竟需要大量的CPU运算时间,这或多或少也是很大的一块压力。所以就想,有没有一种不靠服务器,就只靠JS就生成二维码呢,毕竟二维码就是一堆黑白点而已。我也没有刻意去找网络上是否已经存在这样的解决方案,而且自己一直想深入分析二维码的生成细节,现有的项目也有这样的需求,于是我自己研究了下,写下了这么个qr.js。

大家可以从这个地址下载:https://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级别的,其实用户是感受不到它的生成过程,但是如果这个操作放在服务器端,可想而知压力之大。

然后说下生成Bitmap,位图。因为只有2个颜色,所以用1个bit的位图,在不压缩的情况下,也不会很大。这里有一点需要注意的是,位图的布局方式是最后一行先写,然后依次向上,而且每一行的总字节数,必须是4的倍数,比如一个version3的qr码,是33*33个像素阵,一行33个像素要33个bits,5个bytes,但是在输出的时候,必须加上3个bytes来凑满8=4*2个bytes,有点恶心,但其实大小还是可控的。
 
最后说下嵌入logo的问题,因为QR有强力的RS纠错编码,所以,一个小图片放在中间也不会影响扫描器扫描,但是需要一个较高的纠错等级,我这边只是把这个图片作为一个浮动层飘在二维码上面,当然也是可以把它嵌入到刚才提到的bitmap中,但是太复杂了,意义也不大,暂且就这样了。
 
关于详细的实现细节和使用方法,在qr.js里我已经非常详细地注解了,时间仓促,肯能会有bug,见谅!
 
======UPDATE 2014-05-22====
有人反应IE6和7是不支持base64图片的,为了避免针对IE6-7的简单兼容,我将qr.js稍作修改,当选择mode 0且是ie6 或者 ie7,将强制选择mode 1做输出。
PS:base64图片在IE6,7下可以使用mht的组合文件形式输出,我试了下,不是非常灵活,建议还是在mode 1下输出。当时未能用真实的低版本环境测试而是直接用模拟版本,实在抱歉!JS就是浏览器兼容性非常恶心!
 
======UPDATE 2014-05-23====
URL最好不要以斜杠'/'结尾,很多扫描器无法打开这样的链接。我试了下,有些网站最后带/是可以打开的,比如http://www.baidu.com/,所以也很难说是扫描器的问题。我测试了以下一些站点:
http://www.google.com/
http://www.baidu.com/
http://www.microsoft.com/
以上这些网站带/都可以扫描出来
http://you.ctrip.com/
http://www.163.com/
http://www.cnblogs.com/
以上这些网站带/都扫描不出来
然后大家感兴趣的话可以去比较下,用Fiddler抓下包,然后看下请求Header和返回Header,不难发现,请求Header都是差不多的,区别在于返回的header,所有带/且不能扫描出来的返回请求中,都对Content-Encoding做了定义,gzip或者chunked,所以,我觉得可能是手机浏览器在解码并处理默认跳转的时候无法获得默认的跳转内容页,所以导致无法显示扫描出来的页面。如果不带斜杠,服务器端找到默认路径和默认页并输出到缓冲区,如果带/,客户端直接定位到默认路径。
 
posted @ 2014-05-21 12:29 万力王 阅读(28937) 评论(65) 推荐(93) 编辑
摘要: 其实很多非业务逻辑的功能,比如分页,数据过滤,可以在程序上面节省很多内存和CPU时间,但往往又找不到一个比较通用有效的方法,花了点时间,终于把我想要的在数据库中分页和过滤的功能写了出来,在这里分享。第一期望:我希望输入页码(pageIndex),每页显示的记录数(pageSize),然后这个存储过程就可以给我一个当前页的数据集。首先,我假设有个表叫Configuration,里面就3个字段,Id, Key, Value,就是一个简单的数据表,定义如下:CREATE TABLE [dbo].[Configuration]( [Id] int NOT NULL IDENTITY (1,1),... 阅读全文
posted @ 2014-04-09 16:38 万力王 阅读(4453) 评论(40) 推荐(12) 编辑
摘要: 一晃眼,有两年没有写博客了,回顾前两年,各种奔波,各种忙碌,也有不少的收获。从今天开始,我要把这些收获都分享在这里。其实这两年,对我影响最大的是开发流程。总所周知,一个好的开发流程,对于项目的进行,更新和维护都起着至关重要的作用。Scrum适用于一些开发周期长,需求不明确,或者随时间渐进明确,频繁更新的项目。然而,现在国内的一些公司,甚至一些大公司,都对这块不太重视,或者做得不够透彻。从而程序猿们天天加班,苦不堪言。我们先来看张我通过实际经验画的图流程图,红色圈圈出来的是我认为比较容易忽略的部分,接下来一一说明。1/2、项目决定启动后,第一步就是产品组准备需求,整理出需求文档。这个需求文档是需 阅读全文
posted @ 2014-04-08 15:50 万力王 阅读(9534) 评论(2) 推荐(2) 编辑
摘要: 接着上次的开篇,这次重点讲Worker Role和Web Role。1、什么是Role?Role可以理解为一种部署方式。我们所要运行的程序,归根究底是要运行在进程上的。我们开发程序有Windows Service,Web Application,Silverlight等等区分,各有各得用武之地和区别,但是底层都是被host在进程之上,各个进程是相对封闭的,为了能在进程与进程间传递数据,于是就有了最早的IO,Remoting,以及我们现在用的非常普遍的WCF Service。当然进城内还有AppDomain的概念,不再细说。我提这些是因为Role在Windows Azure上,正是为了给不同类型 阅读全文
posted @ 2012-06-20 21:09 万力王 阅读(3427) 评论(1) 推荐(0) 编辑
摘要: 最近公司接触Windows Azure, 在苦苦摸索一个多月后,感受颇丰,故在此分享,与博友们分享一点经验。第一篇讲一些基本的概念和所需要使用的软件。1、什么是Azure?Azure是比较新的一个概念,为什么说是概念而不是说产品呢,因为Azure的技术基础是相对比较成熟的,现在不管是Amazon的, 还是Microsoft的, 还是Google,开始做云都是很快做起来的,而不是说要搞个三五年的研究才出来这么个产品。但是大家会发现,做云技术的都是些比较大的公司,很少有新创业的公司能自己办云服务的。这其中原因要追溯到云技术的起源。最早做云的是亚马逊,大家知道亚马逊最早是买书的,在网络上买,很多投资 阅读全文
posted @ 2012-06-18 23:22 万力王 阅读(1800) 评论(7) 推荐(1) 编辑
摘要: 让大家久等了,9月份,我们准备了20个中文版Microsoft OneCode Sample,其中包括3个Windows Form Sample,2个Program Language Sample,6个Windows Base Sample,1个Silverlight Sample,2个WPF Sample和6个ASP.NET Sample。相信又可以让大家饱餐一顿了。下载地址:http://1codechs.codeplex.com/releases/view/73730如果您第一次听说All-In-One Code Framework这个项目,请参阅主页上的相关介绍http://1code 阅读全文
posted @ 2011-09-23 14:54 万力王 阅读(2690) 评论(3) 推荐(8) 编辑
摘要: 2011年的8月8日,立秋,转眼间,秋天悄悄走来;2011年的8月8日,奥运,转眼间,北京奥运会已过三载;2011年的8月8日,七夕,转眼间,情人节的幸福或失落尚在心间;自问:时光飞逝,我们曾否孤单、兴奋、快乐?我说:有家,有你,有微软一站式示例代码库,幸福常在!——赠给所有为情人节而忙碌和奋斗的兄弟姐妹们!今天我们发布了新一版本的All-In-One Code Framework 中文版,新增15个Sample。包括4个ASP.NET Sample, 2个Azure Sample, 3个Program Language Sample, 2个Silverlight Sample, 2个Wind 阅读全文
posted @ 2011-08-10 17:04 万力王 阅读(2182) 评论(1) 推荐(3) 编辑
摘要: 暑假到了,绿树阴浓夏日长,楼台倒影入池塘,水精帘动微风起,满架蔷薇一院香。我们发布了新一版本的All-In-One Code Framework 中文版,新增14个Sample。包括5个ASP.NET Sample, 2个Azure Sample, 2个Silverlight Sample, 3个 Library Sample 和2个Winform Sample!!敬请期待,后续更精彩。下载地址:http://1codechs.codeplex.com/releases/view/69996如果您第一次听说All-In-One Code Framework这个项目,请参阅主页上的相关介绍htt 阅读全文
posted @ 2011-07-14 15:32 万力王 阅读(588) 评论(1) 推荐(1) 编辑
摘要: This blog comes from here:http://weblogs.asp.net/justin_rogers/pages/126345.aspxAbstract:Marshalling the execution of your code onto the UI thread in the Windows Forms environment is critical to prevent cross-thread usage of UI code. Most people don't understand how or when they'll need to u 阅读全文
posted @ 2011-07-11 17:01 万力王 阅读(752) 评论(0) 推荐(0) 编辑
摘要: http://channel9.msdn.com/Shows/Visual-Studio-Toolbox/Visual-Studio-Toolbox-All-In-One-Code-Framework================================http://1codechs.codeplex.com/http://1code.codeplex.com/ 阅读全文
posted @ 2011-07-07 10:51 万力王 阅读(208) 评论(0) 推荐(0) 编辑
点击右上角即可分享
微信分享提示