Using Jquery.qrcode.js to generate a two-dimensional code plug-in _jquery

Source: Internet
Author: User

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.

1.qrcode is actually through the use of jquery to achieve graphics rendering, drawing, support canvas (HTML5) and table two ways,

GitHub Source Address: Https://

Parameter description:

    • Render: "Canvas",//Set Rendering mode
    • WIDTH:256,//Set width
    • HEIGHT:256,//Set height
    • Typenumber:-1,//Calculation mode
    • correctlevel:qrerrorcorrectlevel.h,//Error Correction level
    • Background: "#ffffff",//Background color
    • Foreground: "#000000"//Foreground color

2. Use examples:

Plug-in references:

<script src= ". /js/jquery-1.11.3.min.js "></script> 

Simple Example 1:

<div id= "code" ></div> 
 Any string generates two-dimensional code 
 //default use canvas Paint 
 $ (' #code '). QRCode ( ' '); 

Simple Example 2:

<div id= "code" ></div> 
 //table mode compatible IE low version 
 $ (' #code '). QRCode ({ 
  Render: ' table ', 
  text: ' ' 

Simple Example 3 (Chinese support):

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.

<div id= "code" ></div> <script>//If there is Chinese in the content, it is necessary to convert the string to Utf-8 function ToUtf8 (str) {var out in the generation of two-dimensional code money. 
  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 >>) & 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; 
 } $ (' #code '). QRCode ({Text:toutf8 (' I am Tianma '), width:150, height:150});  The current micro-letter/Alipay etc. do not recognize the other colors of the two-dimensional code $ (' #code '). QRCode ({Text:toutf8 (' I am Tianma '), width:150, height:150, background: 
' #f00 ', foreground: ' #0f0 '}); </script>  

Example 4:

The value length of the Text property cannot be too long, the maximum number of bytes 10208 
//text string too long micro-letter/Alipay, such as sweeping sweep can not identify, micro-bo identify content more 
//micro Bo sweep a sweep: About 200 words, micro-letter sweep: About 160 words within, Pay for a sweep: about 130 characters within 
$ (' #code '). QRCode ({ 
 Text:toutf8 (' signalr) is a Microsoft. NET Framework Library that the team is developing and JQuery Plug-ins, which may be included in later versions of the platform. It provides some of the most promising features that are, and are more and more, not currently available, ' 

I hope this article is helpful to you, using jquery.qrcode.js to generate a two-dimensional code plug-in content is introduced here. I hope you will continue to pay attention to our website!

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: 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.