Home > Developer > Web Develop
With the development of mobile Internet, two-dimensional code is now more and more widely used, easy to sweep can browse the site, add a friend or something, compared to the manual input is really convenient too much.
Prior to do a comprehensive evaluation system, consider the gradual realization of mobile, a long string of IP address user input is also inconvenient, with the help of QR code, the user picks up the mobile phone sweep can directly enter the system.
Based on this application scenario, the Web site to study the implementation of the two-dimensional code, summed up there are the following two kinds:
1, with some two-dimensional code generation site or two-dimensional code generator to generate two-dimensional code image, and then hang on the site, such as the Code Cloud Qr-code (QR code) online generator
Advantages: The development cost is zero, can quickly realize the diversification of the two-dimensional code;
Disadvantage: Change the maintenance of the QR code is slightly troublesome
2, in the backend using Java or. NET code to generate two-dimensional code images, and then on the site to refer to pictures, such as QRCode, zxing, etc.
Advantages: Strong customization, fast batch generation
Cons: Heavy-weight implementation, high development costs for simple applications
3, in the front-end page through JavaScript and other forms of instant birth to a QR code (ˇ?ˇ), such as Jquery-qrcode
Pros: Lightweight implementation, reduce picture Io, save traffic
Disadvantage: not suitable for complex two-dimensional code generation
Of course, in practical applications, these three implementation methods are not completely isolated, we can also be based on the actual situation of the application, to maximize efficiency, cost savings.
The evening is not much time to choose a jquery-qrcode study.
Jquery-qrcodeJquery-qrcode is a jquery plugin that generates two-dimensional code on the browser side. It is independent, the minimum compression after less than 4k, there is no picture download request. Once the library is introduced, it is easy to add a QR code to a Web page with just one line of code.
It's hosted on GitHub: Https://github.com/jeromeetienne/jquery-qrcode
Jquery-qrcode consists of two main files:
1, Qrcode.js: Two-dimensional Code algorithm implementation class
2, Jquery.qrcode.js: Using jquery to package qrcode.js, according to user parameters, the implementation of canvas and table two ways to render the generation of two-dimensional code
Only one file jquery.qrcode.min.js after compression.
Code implementationIn fact, there are very detailed instructions and examples on GitHub, and we don't have much to explain here.
However, in order to facilitate the use of the future, I still combine the network with the use of the experience to re-organize a copy of the code.
The jquery-qrcode.html code is as follows:
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "UTF-8"> <title>Generate two-dimensional code via Jquery-qrcode</title></Head><Body><!--introduction of the compressed version of jquery in the public library of Baidu CDN -<Scriptsrc= "Http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></Script><!--introduction of compressed version Jquery.qrcode.js -<Scriptsrc= "Jquery.qrcode.min.js"></Script><!--Uncompressed requires the introduction of two files Jquery.qrcode.js and Qrcode.js -<!--Jquery.qrcode.js:jquery Package Rendering class Library -<!--<script src= "Jquery.qrcode.js" ></script> -<!--qrcode.js: Two-dimensional code core computing class library -<!--<script src= "Qrcode.js" ></script> -<Scriptsrc= "Jquery.qrcode.min.js"></Script><!--solve Chinese garbled problem, introduce utf16t8.js -<Scriptsrc= "Utf16to8.js"></Script><P>Render with canvas (http://www.cnblogs.com/scaleworld/)</P><DivID= "Qrcodecanvas"></Div><P>Render with table (weight-to-World blog: http://www.cnblogs.com/scaleworld/)</P><DivID= "Qrcodetable"></Div><Script> //in the simplest usage, render defaults to canvas $('#qrcodeCanvas'). QRCode ("http://www.cnblogs.com/scaleworld/"); //full usage, with default values can be omitted $('#qrcodeTable'). QRCode ({text:utf16to8 ("Weighing the World blog: http://www.cnblogs.com/scaleworld/"),//QR code contains content, the default only supports English content, Chinese will be garbled, through the Utf16to8 transcoding can support ChineseRender:"Table",//render mode can choose canvas or table, default is Canvas,canvas mode also support right-click picture DownloadWidth: the,//width, default isHeight: the,//height, default is 256, recommended width and height consistency, otherwise not easy to be recognizedTypenumber:-1,//calculation mode, default is -1 //correctlevel:qrerrorcorrectlevel.h,//Error correction level, default is QRErrorCorrectLevel.H, but add correctlevel this line cannot render the QR codebackground:"#ffffff",//background color, default is whiteForeground:"#000000"//foreground color, default is black });</Script><Body></HTML>
Utf16to8.js
Based on the official sample test, we will find that the Chinese QR code identified will be garbled.
According to the garden Friends of the interpretation of good reading:
This is related to the mechanism of JS, Jquery-qrcode This library is using charCodeAt () This way to encode the conversion,
And this method by default will get its Unicode encoding, the general decoder is the use of UTF-8, iso-8859-1 and other ways,
English is no problem, if it is Chinese, the general Unicode is UTF-16 implementation, the length of 2 bits, and UTF-8 encoding is 3 bits, so that the codec of the two-dimensional code does not match.
The solution, of course, is to convert the string to UTF-8 before the QR code is encoded.
So we can use utf16to8.js to solve this problem, the specific code is as follows:
functionUtf16to8 (str) {varOut , 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 >> b) & 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)); } } returnOut ;}
You can also download the code on my github.
Application effectGenerate two-dimensional code online via Jquery-qrcode
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
