Jquery.qrcode dynamically generate QR codes on the client and add custom logos

0 Jquery.qrcode Introduction

Jquery.Qrcode.js is a plugin that dynamically generates two-dimensional code on the browser side based on jquery, supports canvas and table two rendering methods, and has the advantage of being dynamically generated on the client side, reducing the pressure on the server, especially in a system that uses a large number of QR codes. Jquery.qrcode mainly includes the following parameter settings:

• Render defines the rendering of two-dimensional code, with table and canvas two ways of rendering
• Width defines the widths of the two-dimensional code
• Height defines the heights of the two-dimensional code
• Text defines the content of the two-dimensional code
• The calculation mode of Typenumber QR code is typically 1 by default
• Correctlevel the error correction level of the two-dimensional code
• Background define the background color of the QR code
• Foreground defining the foreground color for the QR code

1 Jquery.qrcode Basic Use 1.0 add related references

Jquery.qrcode only relies on jquery, so we just 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 Adding render area elements

Jquery.qrcode uses a DIV element as the target area for the render, adding a div tag to the page.

<div id= "Qrcodediv" ></div>

1.2 Two-dimensional code generation

$ ("#qrCodeDiv"). QRCode ({   render: "Canvas",//Render in table mode (IE compatible) and canvas mode    width:260,//Width    height:260,/ /height    text: "www.baidu.com",//Content    Typenumber: -1,//calculation mode    correctlevel:2,//Two-dimensional code error correction level    background: "# FFFFFF ",///Background color    foreground:" #000000 "  //Two D code color});

Two-dimensional code is generated as follows

2 Jquery.qrcode support for Chinese characters

The default jquery.qrcode is not supported in Chinese encoding, above if we set the text content to Chinese strings, generated QR code and scan will find the result is garbled. This is because Jquery.qrcode uses the charCodeAt () way to encode the conversion, by default, UTF-8 encoding, and for the Chinese general is the implementation of UTF-16 encoding, which will lead to garbled appearance, the solution is in the QR code code before, Convert the content string of the QR code into UTF-8 format, JS conversion method 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            + = S Tring.fromcharcode (0xE0 | ((c >> b) & 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, the result of transcoding will be the value of text

$ ("#qrCodeDiv"). QRCode ({    render: "Canvas",//Render in table mode (IE compatible) and canvas mode    width:260,//Width    height:260,/ /height    text:utf16to8 ("QR code for Chinese character content"),//content    Typenumber: -1,//calculation mode    correctlevel:2,//QR code error correction level    background: "# FFFFFF ",///Background color    foreground:" #000000 "  //Two D 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 is not to support the addition of custom logo, here is a simpler implementation is to add an IMG tag for each QR code, so that the IMG in the two-dimensional code area relative to the center display.

Control the location of the IMG tag

var margin = ($ ("#qrCodeDiv"). Height ()-$ ("#qrCodeIco"). Height ())/2; Control the location of the logo icon $ ("#qrCodeIco"). CSS ("margin", margin);

The final result is as follows

Jquery.qrcode Download

Jquery.qrcode dynamically generate QR codes on the client and add custom logos