Generate QR code using javaScript

What is a QR code?

QR code (abbreviated from Quick Response code) is a type of matrix barcode (or two-dimensional barcode) first designed in 1994 for the automotive industry in Japan. A barcode is a machine-readable optical label that contains information about the item to which it is attached.

In India, QR code got popularity due to UPI payment and many apps providing the feature to scan QRCode to make payments

Using JavaScript we can create QR code. There are many JavaScript-based libraries that can be used to create a QR code. Let understand few libraries

Using QRCode.js

QRCode.js is JavaScript library for making QR code. QRCode.js supports Cross-browser with HTML5 Canvas and table tag in DOM. QRCode.js has no dependencies.

You can download the QRCode.js utility and include qrcode.js as script.

<div id="qrcode"></div>
<script type="text/javascript" src="qrcode.js">
new QRCode(document.getElementById("qrcode"), "https://singhak.in");
</script>

QRCode method take two argument first one is “target element or ‘id’ attribute of element.” and second one is “Option” of qrcode like height, width, text etc.

<script type="text/javascript" src="qrcode.js">
//here "test" is id of html element
var qrcode = new QRCode("test", { 
    text: "https://singhak.in",
    width: 128,
    height: 128,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});
</script>

Complete code on GitHub

Leave a Reply