jquery plug-in qrcode generates QR code online

jquery plug-in qrcode generates QR code online_jquery

WBOY

Release： 2016-05-16 16:02:16

Original

1372 people have browsed it

With the development of mobile Internet, QR codes are now more and more widely used. By scanning them, you can browse websites, add friends, etc. It is really much more convenient than entering them manually.

We made a comprehensive evaluation system in the early stage, considering the gradual implementation of mobile. It is inconvenient for users to enter a long list of IP addresses. With the help of QR codes, users can directly enter the system by picking up their mobile phones and scanning.

Based on this application scenario, I went online to research how to implement website QR codes. In summary, there are two types:

1. Use some QR code generating websites or QR code generators to generate QR code images, and then hang them on the website, such as Code Cloud QR-Code (QR code) online generator

Advantages: Development cost is zero, diversified QR codes can be quickly realized;

Disadvantages: Changing the QR code and maintaining it is a bit troublesome

2. Use java or .net code on the backend to generate QR code images, and then reference the images on the website, such as qrcode, zxing, etc.

Advantages: Highly customizable, fast batch generation

Disadvantages: heavyweight implementation, higher development cost for simple applications

3. Instantly generate a QR code (ˇ?ˇ) on the front-end page through JavaScript or other methods, such as jquery-qrcode

Advantages: lightweight implementation, reducing image IO, saving traffic

Disadvantages: Not suitable for generating complex QR codes

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

I didn’t have much time at night so I chose jquery-qrcode to study.

jquery-qrcode

jquery-qrcode is a jquery plug-in that can generate QR codes on the browser side. It is self-contained, less than 4k with minimal compression, and has no image download requests. After introducing this class library, you can easily add QR codes to web pages with just one line of code.

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 implement canvas and table rendering to generate QR codes according to user parameters

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

Code implementation

There are actually very detailed instructions and examples on github, so I won’t go into details here.

However, for the convenience of future use, I will reorganize the code based on everyone’s experience on the Internet.

jquery-qrcode.html code is as follows:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>通过jquery-qrcode生成二维码</title>
</head>
<body>
<!-- 引入百度CDN公共库的压缩版jQuery -->
<script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
<!--引入压缩版jquery.qrcode.js -->
<script src="jquery.qrcode.min.js"></script>
<!--未压缩则需要引入两个文件jquery.qrcode.js和qrcode.js -->
<!--jquery.qrcode.js：jquery封装渲染类库 -->
<!--<script src="jquery.qrcode.js"></script>-->
<!--qrcode.js：二维码核心计算类库 -->
<!--<script src="qrcode.js"></script>-->
<script src="jquery.qrcode.min.js"></script>
<!--解决中文乱码问题，引入utf16t8.js -->
<script src="utf16to8.js"></script>

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

<div id="qrcodeTable"></div>
<script>
 //最简用法，render默认是canvas
 $('#qrcodeCanvas').qrcode("http://www.jb51.net/");
 //完整用法，有默认值的均可省略
 $('#qrcodeTable').qrcode({
  text: utf16to8("脚本之家：http://www.jb51.net/"),//二维码包含的内容，默认只支持英文内容,中文会乱码，通过utf16to8转码可支持中文
  render: "table",//渲染方式可选择canvas或table，默认是canvas，canvas方式还支持右键图片下载
  width: 256,//宽度，默认是256
  height: 256,//高度，默认是256，建议宽度和高度保持一致，否则不容易被识别
  typeNumber: -1,//计算模式，默认是-1
  //correctLevel: QRErrorCorrectLevel.H,//纠错等级，默认是QRErrorCorrectLevel.H，但是加上correctLevel这一行后无法渲染出二维码
  background: "#ffffff",//背景颜色，默认是白色
  foreground: "#000000"//前景颜色，默认是黑色
 });
</script>
<body>
</html>

Copy after login

Based on the official sample test, we will find that the recognized Chinese QR code will be garbled.

According to the explanation from netizens with good intentions:

This is related to the js mechanism. The jquery-qrcode library uses charCodeAt() to perform encoding conversion,

This method will obtain its Unicode encoding by default. Generally, decoders use UTF-8, ISO-8859-1, etc.,

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

The solution is of course to convert the string into UTF-8 before encoding the QR code

So we can solve this problem with the help of utf16to8.js. 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;
}

Copy after login

The above is all the content shared with you today. I hope it will be helpful to everyone learning jQuery.