Jquery. Qrcode dynamically generates a QR code on the client and adds a custom Logo, jquery. qrcodelogo

Jquery. Qrcode dynamically generates a QR code on the client and adds a custom Logo, jquery. qrcodelogo
0 Jquery. Qrcode Introduction

Jquery. qrcode. js is a plug-in that dynamically generates two-dimensional codes based on Jquery on the browser. It supports two rendering modes, Canvas and Table. Its advantage is that it is dynamically generated on the client, reducing the pressure on the server, especially in systems that use a large number of QR codes. Jquery. Qrcode mainly includes the following parameter settings:

• Render defines the two-dimensional code rendering Methods: table and canvas.
• Width defines the width of the QR code.
• Height defines the height of a QR code.
• Text defines the QR code content
• The calculation mode of the typeNumber QR code is generally-1 by default.
• Error Correction level of the correctLevel QR code
• Background defines the background color of the QR code
• Foreground defines the foreground color of the QR code

1 Jquery. Qrcode use 1.0 to add references

Jquery. Qrcode only depends on Jquery, so we only need to add Jquery and Jquery. Qrcode references.

<script src="~/Content/js/jquery-2.1.4.min.js"></script><script src="~/Content/js/jquery.qrcode.min.js"></script>

1.1 add rendering area Elements

Jquery. Qrcode uses the div element as the target area for rendering and adds a div label to the page.

<div id="qrCodeDiv"></div>

1.2 QR code generation

$ ("# QrCodeDiv "). qrcode ({render: "canvas", // The rendering method can be table (IE compatible) or canvas width: 260, // width height: 260, // height text: "www.baidu.com", // content typeNumber:-1, // calculation mode correctLevel: 2, // two-dimensional code correction level background: "# ffffff", // background color foreground: "#000000" // QR code color });

The QR code is generated 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 ;};

When generating a QR code, use the transcoded result as the text value.

$ ("# QrCodeDiv "). qrcode ({render: "canvas", // The rendering method can be table (IE compatible) or canvas width: 260, // width height: 260, // height text: utf16to8 ("Chinese Character content QR code"), // content typeNumber:-1, // calculation mode correctLevel: 2, // two-dimensional code correction level background: "# ffffff ", // background color foreground: "#000000" // QR code color });

3 Jquery. Qrcode Add a custom Logo image

Adding a custom logo to the QR code will make your QR code look more professional. The default Jquery. qrcode does not support adding custom logos. Here, a simple implementation solution is to add an img tag for each QR code so that the img can be relatively centered in the QR code area.

Control the position of the img tag

Var margin = ($ ("# qrCodeDiv "). height ()-$ ("# qrCodeIco "). height ()/2; // control the Logo icon position $ ("# qrCodeIco" ).css ("margin", margin );

The final result is as follows:

Download Jquery. Qrcode