Use jquery component QRCode to generate two-dimensional code and application guide _jquery

There are some CPU-consuming calculations that can be calculated on the client side, such as generating two-dimensional code.

QRCode is actually calculated and then uses jquery to implement graphics rendering and drawing. Supports canvas and table two ways to generate the two-dimensional code we need.

Specific usage
QRCode is a jquery component that requires at least two JS, which is jquery and Jquery.qrcode. You can get the latest code to Https://github.com/jeromeetienne/jquery-qrcode.

Copy Code code as follows:

<script type= "Text/javascript" src= "Jquery.js" ></script>
<script type= "Text/javascript" src= "Jquery.qrcode.min.js" ></script>

On the page, add an empty element where you want to display the two-dimensional code (here with Div)

Copy Code code as follows:

<div id= "QRCode" ></div>

When you need to generate a two-dimensional code, call the statement directly generated.

Copy Code code as follows:

$ ("#qrcode"). Qcrode ("http://www.jb51.net");//pages to be generated

Detailed parameters

Parameter Default value description
Render canvas rendering, support for canvas and table
Width not wide
Height without altitude
Text has no URL to generate

Such as:

Copy Code code as follows:

$ ("#qrcode"). Qcrode ({
Render: "Table",
WIDTH:200,
HEIGHT:200,
Text: "Http://www.jb51.net"
});

Resolve URL with Chinese method

When we tried to find a two-dimensional code that could not recognize Chinese content, we found that the Jquery-qrcode was encoded in charCodeAt () mode by looking for multi-party data. This method by default will get its Unicode encoding, if there is Chinese content, in the generation of two-dimensional code to convert the string to UTF-8, and then generate two-dimensional code. You can convert the Chinese string by using the following functions:

Copy Code code as follows:

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 >>) & 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;
}

Download two-dimensional code

With the front-drawn two-dimensional code, not a canvas is a table, how to download it? All we need to do is canvas the content to image and download it.

Copy Code code as follows:

function Download (canvaselem, filename, imagetype) {
Var event, Savelink, ImageData, Defalutimagetype;
Defalutimagetype = ' png ';//define default picture type
ImageData = Canvaselem.todataurl (imagetype | | defalutimagetype);//convert canvas element to image data
Savelink = Document.createelementns (' http://www.w3.org/1999/xhtml ', ' a ');
Savelink.href = ImageData;
Savelink.download = filename;
event = document.createevent (' mouseevents ');
Event.initmouseevent (' Click ', True, false, window, 0, 0, 0, 0, 0, False, False, False, FALSE, 0, NULL);
Savelink.dispatchevent (event);
};

Simple encapsulation in the angular

Used in angular, can be encapsulated into directive. However, make sure that you have introduced the previous two JS files.

Copy Code code as follows:

var appmodule = angular.module (' app ', []);
Appmodule.directive (' QRCode ', function () {
return {
Restrict: "A",
Scope: {
Text: ' = ',
Options: ' = '
},
Link:function (Scope, Elem, attrs) {
var $elem, options;
$elem = $ (elem);
Options = {//Get the width and height of the element
Width: $elem. Width (),
Height: $elem. Height ()
};
Angular.extend (options, scope.options);
Scope. $watch (' text ', function (NewText) {
if (NewText) {
Options.text = NewText;
$ (elem). QRCode (options);//Regenerate two-dimensional code
}
});
};
};
});

The download method can be encapsulated as a service in the angular.

Small partners will use QRCode to generate two-dimensional code, it is very useful, I hope you can enjoy.