Use jquery component qrcode to generate QR code and application guide_jquery

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

qrcode actually calculates and then uses jquery to achieve graphics rendering and drawing. Supports canvas and table methods to generate the QR code we need.

Specific usage
qrcode is a jquery component and requires at least two js, ​​namely jquery and jquery.qrcode. You can go to https://github.com/jeromeetienne/jquery-qrcode to get the latest code.

Copy code The code is as follows:

On the page, add an empty element (use div here) where the QR code needs to be displayed

Copy code The code is as follows:

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

Copy code The code is as follows:

$("#qrcode").qcrode("http://www.jb51.net");//The page that needs to be generated

Detailed parameters

Parameter Default Value Description
render canvas rendering method, supports canvas and table
width None Width
height None Height
text None URL needs to be generated

Such as:

Copy code The code is as follows:

$("#qrcode").qcrode({
render: "table",
Width: 200,
height: 200,
text: "http://www.jb51.net"
});

How to solve the problem of Chinese characters in the URL

During the experiment, we found that the QR code with Chinese content could not be recognized. By searching various information, we learned that jquery-qrcode uses the charCodeAt() method for encoding conversion. This method will obtain its Unicode encoding by default. If there is Chinese content, the string must be converted to UTF-8 before generating the QR code, and then the QR code will be generated. You can convert Chinese strings through the following functions:

Copy code The 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;   
}

下载二维码

用前端画出来的二维码，不是一个canvas就是一个table，如何下载呢？我们只需要将canvas的内容画到image上，下载下来即可。

复制代码 代码如下:

function download(canvasElem, filename, imageType) {
    var event, saveLink, imageData, defalutImageType;
    defalutImageType = 'png';//定义默认图片类型
    imageData = canvasElem.toDataURL(imageType || defalutImageType);//将canvas元素转化为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);
};

在angular中的简单封装

在angular中使用，可以封装成directive。不过要确保已经引入了之前的两个js文件。

复制代码 代码如下:

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 QR code
            }
           });
        };
};
});

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

Friends, you can use qrcode to generate QR codes. It’s really easy to use. I hope you like it.