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://github.com/jeromeetienne/jquery-qrcode
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>
<script>//
Any string generates two-dimensional code
//default use canvas Paint
$ (' #code '). QRCode ( ' http://blog.csdn.net/u011127019 ');
</script>
Simple Example 2:
<div id= "code" ></div>
<script>
//table mode compatible IE low version
$ (' #code '). QRCode ({
Render: ' table ',
width:100,
height:100,
text: ' http://blog.csdn.net/u011127019 '
};
</script>
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 ASP.net team is developing and JQuery Plug-ins, which may be included in later versions of the ASP.net platform. It provides some of the most promising features that are, and are more and more, not currently available, '
width:150,
height:150
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!