Canvas Or Table Based QR Code Generator - jQuery qrcode
File Size: | 19.7 KB |
---|---|
Views Total: | 14930 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A popular QR Code generator that makes uses of JavaScript (jQuery) to render configurable QR Codes in Table or HTML canvas format.
How to use it:
1. Insert the minified and compiled version of the jQuery qrcode plugin after jQuery.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src="jquery.qrcode.min.js"></script>
2. Create a placeholder element for the generated QR Code.
<div id="example"></div>
3. Initialize the QR Code Generator and specify the text message to be placed in the QR Code.
$('#example').qrcode({ text: "https://www.jqueryscript.net" });
4. If you want to render the QR code in HTML table.
$('#example').qrcode({ render: "table" text: "https://www.jqueryscript.net" });
5. Customize the size (height/width) of the QR Code.
$('#example').qrcode({ text: "https://www.jqueryscript.net", width: 256, height: 256 });
6. Customize the background & foreground colors of the QR Code.
$('#example').qrcode({ text: "https://www.jqueryscript.net", background: "#ffffff", foreground: "#000000" });
7. Customize the type number of the QR Code. typeNumber < 1 for automatic calculation.
$('#example').qrcode({ text: "https://www.jqueryscript.net", typeNumber: -1 });
8. Customize the correct level for the QR Code Generator.
- QRErrorCorrectLevel.H: Approx 30%
- QRErrorCorrectLevel.Q: Approx 25%
- QRErrorCorrectLevel.M: Approx 15%
- QRErrorCorrectLevel.L: Approx 7%
$('#example').qrcode({ text: "https://www.jqueryscript.net", correctLevel: QRErrorCorrectLevel.H });
This awesome jQuery plugin is developed by jeromeetienne. For more Advanced Usages, please check the demo page or visit the official website.