Canvas Or Table Based QR Code Generator - jQuery qrcode

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.