Of Stack

jquery plugin qrcode generates qr codes online

  • 2020-06-01 08:21:42
  • OfStack

With the development of mobile Internet, 2d code is now used more and more widely, you can scan the website, add a friend or something, compared with manual input is really too convenient.

In the early stage, a comprehensive evaluation system was made, considering the gradual realization of mobile, 1 long string of IP address user input is not convenient, with the help of two-dimensional code, users can pick up the mobile phone to sweep directly into the system.

Based on this application scenario, the implementation method of website 2d code is studied on the Internet, which can be summarized into the following two ways:

1, with the help of some 2 d code generation website or 2 d code generator to generate 2 d code pictures, and then hang on the website, such as the code cloud QR-Code (2 d code) online generator

Advantages: development cost is zero, can quickly realize the diversification of 2d code;

Disadvantages: the maintenance of the change 2 d code is a bit troublesome

2. Generate 2d code images using java or.net codes in the back end, and then refer to the images on the website, such as qrcode, zxing, etc

Advantages: strong customizability, fast batch generation

Disadvantages: heavyweight implementation, high development cost for simple applications

3, on the front page via javascript methods such as instant for 2 d code (ˇ & # 63; ˇ), such as jquery - qrcode

Advantages: lightweight implementation, reduce image IO, save traffic

Disadvantages: not suitable for complex 2 - d code generation

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

I chose an jquery-qrcode to study after a short time in the evening.

jquery-qrcode

jquery-qrcode is an jquery plug-in that generates 2-dimensional code on the browser side. It is standalone, less than 4k after minimal compression, and there are no image download requests. With the introduction of this class library, you can easily add 2-dimensional code to the web page with only 1 line of code.

Its custody on github: https: / / github com/jeromeetienne/jquery - qrcode

jquery-qrcode mainly consists of two files:

1. qrcode. js: implementation class of 2-d code algorithm

2. jquery.qrcode.js: encapsulate qrcode.js with jquery, and render canvas and table to generate 2d code according to user parameters

Only one file after compression jquery. qrcode. min. js.

Code implementation

There are already very detailed instructions and examples on github, so I won't explain them here.

However, in order to facilitate the future use, I still combined with the use of the network on everyone's experience to rearrange 1 code.

The code of jquery-qrcode. html is as follows: 


<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title> through jquery-qrcode generate 2 D code </title>
</head>
<body>
<!--  The introduction of baidu CDN A compressed version of the common library jQuery -->
<script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
<!-- Lead-in compressed version jquery.qrcode.js -->
<script src="jquery.qrcode.min.js"></script>
<!-- Uncompressed requires the introduction of two files jquery.qrcode.js and qrcode.js -->
<!--jquery.qrcode.js : jquery Encapsulating the rendering class library  -->
<!--<script src="jquery.qrcode.js"></script>-->
<!--qrcode.js : 2 Dimension code core computing class library  -->
<!--<script src="qrcode.js"></script>-->
<script src="jquery.qrcode.min.js"></script>
<!-- Solve the problem of Chinese garbled code, introduce utf16t8.js -->
<script src="utf16to8.js"></script>

<div id="qrcodeCanvas"></div>

<div id="qrcodeTable"></div>
<script>
 // The simplest use, render The default is canvas
 $('#qrcodeCanvas').qrcode("https://www.ofstack.com/");
 // Full usage, with default values can be omitted 
 $('#qrcodeTable').qrcode({
  text: utf16to8(" Script house: https://www.ofstack.com/"),//2 The content contained in the dimension code is only supported in English by default , Chinese will be messy code, through utf16to8 Transcoding can support Chinese 
  render: "table",// Rendering options are available canvas or table The default is canvas . canvas Mode also supports right - click image download 
  width: 256,// Width, by default 256
  height: 256,// Height, by default 256 Width and height are recommended 1 Send, otherwise not easy to identify 
  typeNumber: -1,// Compute mode, default is -1
  //correctLevel: QRErrorCorrectLevel.H,// Error correction level, default is QRErrorCorrectLevel.H But plus correctLevel this 1 Cannot render after line 2 D code 
  background: "#ffffff",// Background color, default is white 
  foreground: "#000000"// Foreground color, black by default 
 });
</script>
<body>
</html>

Based on the official sample test, we will find that the Chinese 2 d code identified will be garbled.

According to a netizen's explanation of kindness:

This is related to the mechanism of js. The library es1064en-qrcode is converted by charCodeAt().

By default, this method will get its Unicode encoder, and the decoder like 1 is UTF-8, ISO-8859-1 and so on.

There is no problem with English. If it is Chinese, Unicode is generally implemented as UTF-16, with a length of 2 bits, while UTF-8 is encoded in 3 bits, so the encoding and decoding of 2-d code will not match.

The solution, of course, is to convert the string to UTF-8 before encoding it in 2d

So we can use utf16to8. js solve this problem, 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;
}

That's all I have to share with you today. I hope it will be helpful for you to learn jQuery.

Related articles: