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.
On the page, add an empty element (use div here) where the QR code needs to be displayed
When you need to generate a QR code, call the statement to generate it directly.
$("#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:
$("#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:
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.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
