Use the jquery component qrcode to generate the QR code and Application Guide, jqueryqrcode

Use the jquery component qrcode to generate the QR code and Application Guide, jqueryqrcode

There are some cpu-consuming calculations that can be fully calculated on the client, such as generating a QR code.

Qrcode is actually calculated, and then jquery is used to render and draw images. You can use canvas or table to generate the QR code.

Usage
Qrcode is a jquery component and requires at least two js components: jquery and jquery. qrcode. You can get the latest code at https://github.com/jeromeetienne/jquery-qrcode.

Copy codeThe Code is as follows:
<Script type = "text/javascript" src = "jquery. js"> </script>
<Script type = "text/javascript" src = "jquery. qrcode. min. js"> </script>

Add an empty element to the area where the QR code is to be displayed (div is used here)

Copy codeThe Code is as follows:
<Div id = "qrcode"> </div>

When you need to generate a QR code, call the following statement to generate the Code directly.

Copy codeThe Code is as follows:
$ ("# Qrcode"). qcrode ("http://www.bkjia.com"); // page to be generated

Detailed Parameters

Parameter default value description
Render canvas rendering mode, supporting canvas and table
Width without width
Height without height
No url to be generated for text
 
For example:

Copy codeThe Code is as follows:
$ ("# Qrcode"). qcrode ({
Render: "table ",
Width: 200,
Height: 200,
Text: "http://www.bkjia.com"
});

Solve the problem that there is a Chinese method in the url

During the experiment, we found that the two-dimensional code could not recognize Chinese content. We found that jquery-qrcode was converted using charCodeAt. And this method will get its Unicode encoding by default, if there is Chinese content, in the generation of the QR code before the string to the UTF-8, and then generate a QR code. You can use the following functions to convert Chinese strings:

Copy codeThe Code is 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> 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;
}

Download QR code

How can I download a QR code drawn from the front end, either a canvas or a table? We only need to draw the canvas content to the image and download it.

Copy codeThe Code is as follows:
Function download (canvasElem, filename, imageType ){
Var event, saveLink, imageData, defalutImageType;
DefalutImageType = 'png '; // defines the default image type.
ImageData = canvasElem. toDataURL (imageType | defalutImageType); // convert the canvas Element to image data
SaveLink = document. createElementNS ('HTTP: // www.w3.org/5o/xhtml', 'A ');
SaveLink. href = imageData;
SaveLink. download = filename;
Event = document. createEvent ('mouseevents ');
Event. initMouseEvent ('click', true, false, window, 0, 0, 0, 0, 0, false, 0, null );
SaveLink. dispatchEvent (event );
};

Simple encapsulation in angular

In angular, it can be encapsulated as directive. However, make sure that the previous two js files have been introduced.

Copy codeThe Code is as follows:
Var appModule = angular. module ('app', []);
AppModule. directive ('qrcode', function (){
Return {
Restrict: "",
Scope :{
Text: '= ',
Options: '='
},
Link: function (scope, elem, attrs ){
Var $ elem, options;
$ Elem = $ (elem );
Options = {// obtain the width and height of an 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 the QR code
}
});
};
};
});

The download method can be encapsulated into a service in angular.

Our friends will use qrcode to generate a QR code. It is really easy to use and I hope you will like it.