JavaScript learning-generating QR codes and javascript --

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.