JavaScript QR Code Generator

QR Code is becoming very popular with more and more applications using it for information scanning as a QR code is a machine-readable barcode that can be used to hide information from humans and can be accessed via scanning from a mobile application.

If you want to create a simple web application to generate QR code for any custom value using by creating an HTML form for the user to input some value for which the QR code will be generated.

For generating QR code in JavaScript, we will be using a 3rd party Javascript library Qrious.

Here is the code for creating a simple form for the user to input any value, and then the Javascript code for generating QR code.

In the code above, we have initialized the QRious object with the default value https://studytonight.com and the <canvas> tag id in which the QR code will be rendered.

To use the QRious Javascript library, we have included the script in our code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>

We have also defined the generateQRCode() function to generate custom QR code for the value input.

There many properties that can be used to modify the color, size, etc. of the QR code, for example:

qr.set({
    background: 'green',
    backgroundAlpha: 0.8,
    foreground: 'blue',
    foregroundAlpha: 0.8,
    padding: 25,
    size: 500
});

With the above code, the background color for the QR code will be green, and the QR code color will be blue, the padding will be 25px and the height/width of the QR code will be 500px.

I hope you find this simple tutorial useful. If you are facing any issue, do share in the comment section below.

---