Generate a QR code online using jquery-qrcode.

Generate a QR code online using jquery-qrcode.

With the development of the mobile Internet, QR codes are now widely used. It is much more convenient to scan websites and add friends or other information.

A comprehensive evaluation system was developed in the early stage. Considering the gradual implementation of mobility, a long string of IP address user input is not convenient. With the help of the QR code, the user can pick up the mobile phone scan and directly enter the system.

Based on this application scenario, we have studied the implementation of the website QR code on the Internet, and summarized the following two methods:

1. Use some QR codes to generate websites or QR Code generators to generate QR Code images and then link them to websites, such as QR Code cloud QR Code online generators.

Advantage: the development cost is zero, and diversified QR codes can be quickly realized;

Disadvantage: it is a little difficult to maintain the QR code.

2. Generate a QR code image using java or. net code at the backend, and then reference the image on the website, such as qrcode and zxing.

Advantage: strong customization and quick batch generation

Disadvantage: heavyweight implementation method, high development cost for simple applications

3. On the front-end page, use javascript or other methods to generate a QR code (response? Such as jquery-qrcode.

Advantages: lightweight implementation, reducing image I/O and saving traffic

Disadvantage: it is not suitable for generating complex QR codes.

Of course, in actual application, these three implementation methods are not completely isolated. We can also combine the application based on the actual situation of the project to maximize efficiency and save costs.

In the evening, I chose a jquery-qrcode study.

Jquery-qrcode

Jquery-qrcode is a jquery plug-in that can generate QR code on the browser side. It is independent, with a minimum compression capacity of less than 4 kb and no image download requests. After this class library is introduced, you only need a line of code to easily add a QR code to the web page.

It is hosted on github: https://github.com/jeromeetienne/jquery-qrcode

Jquery-qrcode mainly contains two files:

1. qrcode. js: QR code algorithm implementation class

2. jquery. qrcode. js: Use jquery to encapsulate qrcode. js and generate a QR code by rendering canvas and table based on user parameters.

After compression, there is only one file jquery. qrcode. min. js.

Code Implementation

Github provides detailed instructions and examples, so we will not explain them here.

However, to facilitate future use, I will reorganize a piece of code based on my experiences on the Internet.

The jquery-qrcode.html code is as follows:

<! DOCTYPE html> 
Utf16to8. js
Based on the official example test, we will find that the identified Chinese QR code is garbled.
According to yuanyou's explanation:
This is related to the js mechanism. The jquery-qrcode library uses charCodeAt () for encoding conversion,
And this method will get its Unicode encoding by default, the general decoder is using UTF-8, ISO-8859-1 and other methods,
English is no problem, if it is Chinese, under normal circumstances Unicode is UTF-16 implementation, length 2 bits, and UTF-8 encoding is 3 bits, so the codec of the QR code does not match.
The solution is of course to convert the string into a UTF-8 before the QR code encoding
Therefore, we can use utf16to8. js to solve this problem. The specific code is as follows:
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));        }    }    return out;}
You can also download the code on my github.
Application Results