Canvas Or Table Based QR Code Generator - jQuery qrcode

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.

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.

  • Publication date: 03.07.2018
  • Source