Use jquery plug-in qrcode to generate QR code_jquery

QR code applications have penetrated into our lives and work. You only need to "scan" the QR code with your mobile phone to get the corresponding information, which is convenient for us to understand merchants, shop, watch movies, etc. . This article will introduce a jquery-based QR code generation plug-in qrcode. Calling this plug-in on the page can generate the corresponding QR code.
qrcode actually uses jQuery to achieve graphics rendering and drawing, and supports canvas (HTML5) and table. You can get the latest code here.

How to use
1. First add the jquery library file and qrcode plug-in to the page.

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.qrcode.min.js"></script> 

2. Add the following code to the page where the QR code needs to be displayed:

<div id="code"></div> 

3. Call the qrcode plug-in.
qrcode supports two methods of canvas and table for image rendering. The canvas method is used by default, which is the most efficient. Of course, the browser must support HTML5. Direct call as follows:

$('#code').qrcode("http://www.jb51.net"); //任意字符串 

You can also call via:

$("#code").qrcode({ 
  render: "table", //table方式 
  width: 200, //宽度 
  height:200, //高度 
  text: "http://www.jb51.net" //任意内容 
}); 

In this way, a QR code can be generated directly on the page. You can use the "scan" function of your mobile phone to read the QR code information.
Recognize Chinese
During the experiment, we found that the QR code with Chinese content could not be recognized. By searching various information, we learned that jquery-qrcode uses the charCodeAt() method for encoding conversion. This method will obtain its Unicode encoding by default. If there is Chinese content, the string must be converted to UTF-8 before generating the QR code, and then the QR code will be generated. You can convert Chinese strings through the following functions:

function toUtf8(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;  
} 

Example below:

var str = toUtf8("脚本之家！"); 
$('#code').qrcode(str); 

There are a lot of tutorials on how to make QR codes online now. You should learn to use them flexibly and choose your favorite method to master the skills of making QR codes.