JavaScript learning-generating QR codes and javascript --

JavaScript learning-generating QR codes and javascript --

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.

<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)

<div id="qrcode"></div>

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

$ ("# Qrcode"). qcrode ("http://www.cnblogs.com/CraryPrimitiveMan/"); // page to be generated

Detailed Parameters

Parameters	Default Value	Description
Render	Canvas	Rendering Method, supporting canvas and table
Width	None	Width
Height	None	Height
Text	None	Url to be generated

 

 

 

 

 

For example:

$("#qrcode").qcrode({    render: "table",    width: 200,    height: 200,    text: "http://www.cnblogs.com/CraryPrimitiveMan/"});

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:

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.

Function download (canvasElem, filename, imageType) {var event, saveLink, imageData, defalutImageType; defalutImageType = 'png '; // define 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.

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

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

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