How to generate QR code using jquery

To generate a QR code, you just include the jQuery library and then pass the required parameters to the QRCode function, the text you want to encode as the QR code, the width & height of the QR code you want to display.

Step 1: Include the plugin on your document, which can be downloaded here:

<script src="//code.jquery.com/jquery-1.8.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

Step 2: Then create a div in the DOM that will contain the canvas rendered by the plugin.

<div id="qrcode" style="padding: 10px;height:auto;width:65px;"></div>

Step 3: initialize the plugin:

<script type="text/javascript">
var qrcode = new QRCode(
  "qrcode",
  {
    text: "https://www.shinerweb.com", // you can set your QR code text
    width: 100,
    height: 100,
    colorDark : "#000000",
    colorLight : "#FFFFFF",
    correctLevel : QRCode.CorrectLevel.M
  }
);
</script>

Now your QR code is ready, check output with below link.

View Live Output

Full code as below:

<!DOCTYPE html>
<html>
<head>
<title>How to generate QR code using jquery</title>
<!-- *Note: You must have internet connection on your laptop or pc otherwise below code is not working -->
<script src="//code.jquery.com/jquery-1.8.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
</head>
<body>
<h4>How to generate QR code using jquery <a href="https://www.shinerweb.com">Demo by Shinerweb.com</a></h4>
<!-- add id="qrcode" inside div tag -->
<div id="qrcode" style="padding: 10px;height:auto;width:65px;"></div>
</body>
<script type="text/javascript">
var qrcode = new QRCode(
  "qrcode",
  {
    text: "https://www.shinerweb.com", // you can set your QR code text
    width: 100,
    height: 100,
    colorDark : "#000000",
    colorLight : "#FFFFFF",
    correctLevel : QRCode.CorrectLevel.M
  }
);
</script>
</html>

If you have any query then please comments below.