JavaScript generates a QR code image summary and javascript generates a summary.

JavaScript generates a QR code image summary and javascript generates a summary.

Abstract:

Baidu encyclopedia introduces the QR Code in this way: the QR Code (Quick Response Code), also known as the two-dimensional barcode, uses a specific geometric image in the plane according to a certain law (two-dimensional direction) the black and white images distributed on are a key to all information data. In modern business activities, it can be widely used, for example: product anti-counterfeiting/tracing, advertising push, website links, data downloads, product transactions, positioning/navigation, e-commerce applications, vehicle management, information transmission, etc. Today, the application of the smart phone scan (313 for short) function makes the QR code more common. With the booming domestic Iot industry, more QR code technology application solutions have been developed, QR code has become a reality for mobile Internet portals.

We can see QR codes everywhere when surfing the Internet. How can we generate a QR code on the front end? Today, I will share the QR code generated at the front end.

Introduction:

QRCode. js is a js library that supports HTML 5 canvas and table tagging in the DOM across browsers. We use 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 14 k 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 be encoded // width: 50, // define width // height: 50, // define the height // background: "# ccc", // background color // foreground: "red" // foreground color //});}) </script>

Effect:

Qrcodejs:

Qrcodejs features: QR code scanning generated in Chinese characters does not contain garbled characters, and you can select which element to draw the QR code.

<Script type = "text/javascript" src = "jquery. min. js "> </script> <script type =" text/javascript "src =" qrcode. js "> </script> <div id =" qrcode "> </div> <script> new QRCode (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>

Use svg:

<Script type = "text/javascript" src = "jquery. min. js "> </script> <script type =" text/javascript "src =" qrcode. js "> </script> <svg xmlns =" http://www.w3.org/2000/svg "xmlns: xlink = "http://www.w3.org/1999/xlink"> <g id = "qrcode"/> </svg> <script type = "text/javascript"> var qrcode = new QRCode (document. getElementById ("qrcode"), {width: 100, height: 100, useSVG: true}); qrcode. makeCode ("http://www.cnblogs.com/xiyangbaixue"); // qrcode. clear (); // clear the QR code </script>

Effect:

Configuration parameters:

Render string

Configure which node element to use to draw a QR code. Options include table, svg, and canvas.

The default sequence is canvas-> svg-> table.

Text string

String to be encoded

Default Value :""

Width number

The length of the QR code. Unit: px.

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

Default Value: 256

Height number

The width of the QR code in px.

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

Default Value: 256

CorrectLevel number

Error Correction level. values 0, 1, 2, and 3 are recommended. A larger number indicates a higher error correction level.

Default Value: 3

Background color

Background Color

Default: # FFFFFF

Foreground color

Foreground

Default Value: #000000.

Articles you may be interested in:

• Generate business cards, links, and other QR codes based on JavaScript