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