Using the jquery plugin QRCode to generate a two-dimensional code _jquery

Source: Internet
Author: User
Tags jquery library

Two-dimensional code application has penetrated into our life work, you only need to use the phone to the two-dimensional code "sweep" to obtain the corresponding information, to facilitate our understanding of business, shopping, viewing and so on. This article will introduce a jquery based two-dimensional code generation plug-in QRCode, call the plug-in in the page can generate the corresponding two-dimensional code.
QRCode is actually through the use of jquery to achieve graphics rendering, drawing, support canvas (HTML5) and table two ways, you can get the latest code.

How to use
1, first in the page to add jquery library files and QRCode plug-ins.

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

2, in the page need to display a two-dimensional code place add the following code:

<div id= "Code" ></div> 

3, call the QRCode plug-in.
QRCode Support canvas and table two ways to do picture rendering, the default use of Canvas way, the most efficient, of course, browser support HTML5. The direct call is as follows:

$ (' #code '). QRCode ("http://www.jb51.net"); Any string 

You can also invoke the following ways:

$ ("#code"). QRCode ({ 
  render: "Table",//table way 
  width:200,//Width 
  height:200,//height 
  text: "http:// Www.jb51.net "//arbitrary content 

This allows you to directly generate a two-dimensional code in the page, you can use the mobile phone "sweep" function to read two-dimensional code information.
identify Chinese
When we tried to find a two-dimensional code that could not recognize Chinese content, we found that the Jquery-qrcode was encoded in charCodeAt () mode by looking for multi-party data. This method by default will get its Unicode encoding, if there is Chinese content, in the generation of two-dimensional code to convert the string to UTF-8, and then generate two-dimensional code. You can convert the Chinese string by using 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  
      = = S Tring.fromcharcode (0xe0 | ((c >>) & 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;  
} 

The following example:

var str = ToUtf8 ("cloud-Habitat community!") "); 

Now online production of two-dimensional code tutorials, we should learn to use flexible, choose their favorite way to master the production of two-dimensional code skills.

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.