JavaScript generates two-dimensional code

Summary:

Baidu Encyclopedia is the introduction of two-dimensional code: two-dimensional code (Quick Response code), also known as two-dimensional barcode, it is a certain pattern of geometry in the plane (two-dimensional direction) distribution of black and white graphics, is a key to all information data. In modern business activities, can be implemented in a wide range of applications, such as: product security/traceability, advertising push, website links, data download, commodity trading, positioning/navigation, e-commerce applications, vehicle management, information transmission and so on. Now smart phone scanning (short 313) function of the application of the two-dimensional code more common, with the rapid development of the domestic Internet of things industry, more two-dimensional code technology application solutions have been developed, QR code becomes the mobile Internet portal really become a reality.

We are everywhere in the Internet is a QR code, then how to generate two-dimensional code in the front-end? Today I will share the next front-end to generate QR code.

Brief introduction:

Qrcode.js is a library of JS that supports HTML5 canvas and table markers in the DOM across browsers. What we are using is based on qrcode.js.

Browser:

Ie6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, ETC.

Jquery-qrcode:

Jquery-qrcode Features: Simple operation, small size, only 14k after compression, but does not support Chinese encoding.

<script src= "Http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js" ></script><script type= "text/ JavaScript "src=". /jquery.qrcode.min.js "></script><div id=" QRCode "></div><script>$(function(){    $(' #qrcode '). QRCode ("Http://www.cnblogs.com/xiyangbaixue")); //more detailed configuration    //$ (' #qrcode '). QRCode ({    //text: "Http://www.cnblogs.com/xiyangbaixue",//String to encode    //width:50,//define width    //height:50,//define height    //background: "#ccc",//Background color    //foreground: "Red"//foreground color    // });})</script>

Effect:

Qrcodejs:

Qrcodejs Features: Chinese-generated QR code scanning does not appear garbled, and you can choose which element to use to draw the QR code.

<Scripttype= "Text/javascript"src= "Jquery.min.js"></Script>    <Scripttype= "Text/javascript"src= "Qrcode.js"></Script>    <DivID= "QRCode"></Div>    <Script>      NewQRCode (document.getElementById ("QRCode"), "Http://www.cnblogs.com/xiyangbaixue"); //or      //New QRCode (document.getElementById ("QRCode"), {      //text: "Http://www.cnblogs.com/xiyangbaixue",      //width:50,      //height:50,      //background: "#ccc",      //foreground: "Red"      // });    </Script>

Using SVG:

<Scripttype= "Text/javascript"src= "Jquery.min.js"></Script>    <Scripttype= "Text/javascript"src= "Qrcode.js"></Script>    <svgxmlns= "Http://www.w3.org/2000/svg"Xmlns:xlink= "Http://www.w3.org/1999/xlink">      <gID= "QRCode"/>    </svg>    <Scripttype= "Text/javascript">    varQRCode= NewQRCode (document.getElementById ("QRCode"), {width: -, Height: -, Usesvg:true    }); Qrcode.makecode ("Http://www.cnblogs.com/xiyangbaixue"); //qrcode.clear ();//Clear two-dimensional code    </Script>

Effect:

Configuration parameters: Render string

Configure which node element to use to draw the QR code, the options are table , svg andcanvas

The default selection order is canvas svgtable

Text string

The string to encode

Default:""

Width number

The length of the two-dimensional code, the unit is PX

It should be noted that when using table or SVG to draw the QR code, it will be reduced appropriately, so that the dimension of the two-dimensional code matrix can be divisible.

Default:256

Height number

The width of the two-dimensional code, the unit is PX

It should be noted that when using table or SVG to draw the QR code, it will be reduced appropriately, so that the dimension of the two-dimensional code matrix can be divisible.

Default:256

Correctlevel number

Error correction level, preferably 0, 1, 2, 3, the larger the number indicates that the desired level of correction is greater

Default:3

Background color

Background color

Default:#FFFFFF

Foreground color

Front view

Default:#000000

Appendix:

Two-dimensional code generation principle: http://www.thonky.com/qr-code-tutorial/

JavaScript generates two-dimensional code