Use jquery-qrcode to generate a QR code, jquery-qrcode

Use jquery-qrcode to generate a QR code, jquery-qrcode
QR code

Java QR code tools include qrcode and zxing,

However, generally, a large number of QR codes are generated and used for scanning,

Qrcode and zxing both exist, so they are bloated.

Jquery-qrcode

Official Website:

(Jquery-qrcode, a plug-in of jquery, can use js to generate a QR code. The effect is good. Here we will encapsulate it to make it easier to use.

Introduction

Jquery and jquery-qrcode need to be introduced, both of which are available on static cdn and can be directly referenced,

In addition, a piece of JavaScript code for Chinese transcoding needs to be introduced:

<! -- Jquery-1.11.1 --> <script type = "text/javascript" src = "http://cdn.staticfile.org/jquery/1.11.1/jquery.min.js"> </script> <! -- Jquery-qrcode --> <script type = "text/javascript" src = "http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"> </script> <! -- Chinese transcoding --> <script type = "text/javascript"> function qcodetochar (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 ;}</script>

Encapsulation

Encapsulation is for better use. You can directly upload str or a configuration object, as shown below:

/*** Generate QR code * text: text to be generated * type: Chinese or English, cn is Chinese * render: Display Mode, table is form * width: width * height: height * Note: <@ jsfile 'qrcode'/> */$. fn. qcode = function (options) {if (options) {var opt = {}; if (typeof options = 'string') {opt. text = options;} else {if (options. text) opt. text = options. text; if (options. type & options. type = 'ch') opt. text = qcodetochar (opt. text); if (options. render & options. render = 'table') opt. render = options. render; if (options. width) opt. width = options. width; if (options. height) opt. height = options. height;} $ (this ). qrcode (opt );}};

Use

1. The page requires a div and an id

2. $ ('# test'). qcode ({});

Example

Simple non-Chinese QR code generation:

$('#test').qcode('123');

Custom configuration to generate a QR code:

$ ('# Test'). qcode ({text: '', type: 'cn', width: 100, height: 100 });

More

For more articles, see http://uikoo9.com/blog/list