JavaScript Learning-generating two-dimensional code

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

QRCode is actually calculated and then uses jquery to achieve graphical rendering and drawing. Supports both canvas and table two ways to generate the QR 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 from Https://github.com/jeromeetienne/jquery-qrcode.

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

On the page, add an empty element where you want to display the QR code (div here)

<id= "QRCode"></div>

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

$ ("#qrcode"). Qcrode ("http://www.cnblogs.com/CraryPrimitiveMan/"); // pages that need to be generated

Detailed parameters

Parameters	Default Value	Description
Render	Canvas	Render mode, support for canvas and table
Width	No	Width
Height	No	Height
Text	No	URLs that need to be generated

Such as:

$ ("#qrcode"). Qcrode ({    "table",             www.cnblogs.com/CraryPrimitiveMan/"});

Resolve URL with Chinese method

When we tried to find the two-dimensional code that did not recognize the Chinese content, we found that the Jquery-qrcode was encoded by the charCodeAt () method. This method will get its Unicode encoding by default, and if it has Chinese content, it will convert the string to UTF-8 before generating the QR code, and then generate the QR code. You can use the following functions to convert Chinese strings:

functionToUtf8 (str) {varOut , 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 >> 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)); }        }        returnOut ; }

Download QR code

The two-dimensional code drawn with the front-end, not a canvas is a table, how to download it? We just need to draw the contents of the canvas onto the image and download it.

functionDownload (canvaselem, filename, imageType) {varevent, Savelink, ImageData, Defalutimagetype; Defalutimagetype= ' png ';//define default picture typesImageData = Canvaselem.todataurl (ImageType | | defalutimagetype);//Convert a canvas element to image dataSavelink = 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);};

A simple package in the angular

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

varAppmodule = 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 an elementwidth: $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 downloaded method can be encapsulated as a service use in angular.

Reference: http://ifxoxo.com/jquery-qrcode.html

JavaScript Learning-generating two-dimensional code