JavaScript generates QR code

There are already a lot of QR code coding and decoding tools and code on the network, many of them are server-side, which means that a server is needed to provide two-dimensional code generation. In the light of server performance considerations, this small thing all let the server to do, feel sorry server, especially for large traffic site, although there is server-side cache, after all, need a lot of CPU time, this is more or less a big piece of pressure. So think, there is no server, just rely on JS to generate two-dimensional code, after all, two-dimensional code is a bunch of black and white points. I did not deliberately to find out whether the network already exists such a solution, and I have always wanted to deeply analyze the details of the generation of two-dimensional code, the existing project has such a demand, so I studied the next, wrote a qr.js.

Everyone can download from this address: http://files.cnblogs.com/JerryWeng/qr.js

First look at the effect of this thing:

It has two modes of output:

The first is directly through for Base64 support, the QR code data into a BMP encoded Base64 data string as the src of :

The second is to make each point a div, and then turn the CSS into a black and white dot matrix

Here is the HTML code for the test:

<! DOCTYPE html>
Test pass in Ie6,7,8,9,10,firefox,chrome.
If you are interested in implementation details, let me elaborate on how to implement it.
First, reference documents
Before you begin, you need to prepare some reference documentation to help you understand:
1, QR International standard ISO/IEC 18004. (http://raidenii.net/files/datasheets/misc/qr_code.pdf)
2, http://coolshell.cn/articles/10590.html
3, Galois Field gamma Rovanic (reference Niang)
4, Reed Solomon error Correcting code (reference Niang)
5, Bitmap Code specification (HTTP://ZH.WIKIPEDIA.ORG/WIKI/BITMAP)
6, Base64 Code (reference Niang)
Second, the process
Http://www.processon.com/view/link/537c20340cf27a0d78936e61
The whole process, the steps a little more, but it is not complicated, most of the steps in the standard specification has been explained, in reference to document 2, he has put the coding section is very detailed, I will not repeat, I would like to add the following some of the concept of comparison.
Third, the description
The first is the gamma MabThera domain, the QR error-correcting code is based on GF (256), GF's biggest characteristic is its closed, whether it is subtraction, its calculation results always fall in this finite field, and GF256 in any one of the elements can be represented by a combination of GF2, that is, 0,1 said, we pass 1 +x^1+x^2+...+x^n such a polynomial to represent a number in this finite field, in fact, we do not care about the x here, we only care about this polynomial coefficient combination, the exponent of each x represents the number of digits of the coefficient, for example, x^8+x^6+x+1 corresponds to binary 10100011, So in fact, it's all binary operations. GF256 a total of 256 numbers, we can generate good, and then in the form of arrays and hash tables to participate in the calculation, specifically how to generate GF256, you can refer to this article wiki,http://en.wikipedia.org/wiki/finite_field_arithmetic
Then the RS coding, RS code is based on GF256, so, we need to be familiar with the GF256 operation method, RS coding is simple, is to first know how much I need to have the error correction codeblock, and then construct a polynomial with this number: (x-a^0) (x-a^1 )... (x-a^n-1), where a, or alpha, is the base in GF256, A^n-1 represents a GF256 finite field element, where n is the number of error correction codeblock, and then the data to be encoded codeblocks form a similar polynomial, The value of each codeblock is the coefficient of the polynomial, from high to low, with this data polynomial divided by the generation of polynomial, and then take the remainder, the remainder should also be in the number of GF256, in fact, is the manual method to take the remainder, these methods of operation in the GF's wiki also has a description, See also this article for details wiki:http://en.wikipedia.org/wiki/reed–solomon_error_correction
 Again the problem of mask, the last encoded data, in order to be able to disperse the distribution of black dots and white spots, easy to scan the scanner, each data bit with a mask to do XOR, why is not a fixed mask, because it is not possible to use a mask to disperse all the code. The specification lists 8 kinds of mask functions, these functions, as long as the matching, return 1, otherwise 0, and then each corresponding data bits (x, y) into the function, and then the corresponding data bit XOR, where the X represents the column number, Y for the line number, the upper left corner is 0 points, the specification I is the line number, J represents the column number, which should be noted. Then we have to choose the most appropriate from 8 mask functions, the choice is to separate and 4 decision methods and based on their weights to calculate a score and sum, select the lowest score mask is the mask we want to use. These 4 kinds of decision-making methods and weights are listed in the specification, a little look, it is not difficult to understand. In fact, this operation is also the most cost-performance, because it is necessary to do 8*4 calculation, and each calculation to scan the entire data array. In fact, the first 3 kinds of decision-making methods are still good, the most troublesome is the last kind, to calculate m*n with color block, each occurrence need to add (m-1) * (n-1), this calculation I did not find a more ideal algorithm, I am flexible, only calculate the most chance of the small rectangle,2<=m< 6,2<=n<6 a total of 16 kinds of rectangles, in fact, the results of the calculation is not much. In fact, it is not that no calculation is completely swept out, this selection operation can make the generated QR code optimization. This operation in the client probably at the hundred Ms level, in fact, the user is not aware of its generation process, but if this operation on the server side, it is conceivable that the pressure. 
Then say generate Bitmap, bitmap. Since there are only 2 colors, a bitmap with 1 bit will not be large without compression. One thing to note here is that the layout of the bitmap is the last line to write first, then up, and the total number of bytes per row, must be a multiple of 4, such as a version3 QR code, is a 33*33 pixel array, a row of 33 pixels to 33 bits,5 bytes, But in the output, must add 3 bytes to gather 8=4*2 a bytes, a bit disgusting, but in fact the size is still controllable.   Finally say embedded logo problem, because the QR has a strong RS error correction code, so, a small picture in the middle will not affect the scanner scan, but need a higher error correction level, I just put this picture as a floating layer on the QR code above, Of course, it is possible to embed it in the bitmap just mentioned, but it is too complicated and of little significance.   Detailed implementation details and how to use, in the qr.js I have very detailed comments, time haste, Ken can have bugs, forgive me!  ======update 2014-05-22==== Some reaction IE6 and 7 is not supported Base64 pictures, in order to avoid simple compatibility for ie6-7, I will qr.js slightly modified, when choosing mode 0 and is IE6 or IE7, Mode 1 will be forced to do the output. Ps:base64 pictures can be output under ie6,7 in the form of a combination file of MHT, which I tried, was not very flexible, and it is recommended to output at Mode 1. It was not possible to use the real low-version environment test but to use the analog version directly, I am sorry! JS is browser compatibility very disgusting!  ======update 2014-05-23====url It is best not to end with a slash '/', many scanners cannot open such a link. I have tried, some sites last with/can be opened, such as http://www.baidu.com/, so it is difficult to say that the problem is the scanner. I tested some of the following sites: http://www.google.com/http://www.baidu.com/http://www.microsoft.com/above these sites with/can be scanned out http:// you.ctrip.com/http://www.163.com/http://www.cnblogs.com/above these sites with/are not scanned out and then everyone interested in the words can be compared, with Fiddler grabbed the bag, Then look at the request header and return to the header, it is not difficult to find that the request header is the same, the difference betweenIn the return header, all the return requests with/and cannot be scanned, the content-encoding is defined, gzip or chunked, so I think it is possible that the mobile browser can not get the default jump content page when decoding and processing the default jump. Therefore, the scanned page cannot be displayed. If you do not have a slash, the server side finds the default path and the default page and outputs it to the buffer, and if so, the client navigates directly to the default path. Original: http://www.cnblogs.com/jerryweng/p/3740744.html
 JavaScript generates QR code