Generate QR Code with JavaScript – qrcode.js
QR codes have become an integral part of our daily lives, seamlessly connecting the physical and digital worlds. From payment transactions to event registration, QR codes offer a convenient way to share information effortlessly. As a developer, you may have encountered situations where you needed to generate QR codes dynamically within your web applications. In this article, we will explore qrcode.js, a powerful JavaScript library that simplifies the process of generating QR codes with ease and flexibility.
QRCode Javascript demo
GitHub repository
You can download the complete code of the above demo in the link below:
Implementation
Did you find above QR Code demo easy to use? How did you feel about the customization options and the ability to generate different types of QR codes? Your opinion is valuable to us, and we appreciate your thoughts on the demo. Please take a moment to share your experience in the comment.
In this article, let’s explore the qrcode.js library and its capabilities for generating QR codes in JavaScript. I would provide a step-by-step implementation guide for using qrcode.js in a web application. Furthermore, we would also discuss its key features, including configurable parameters.
# Step 1 : Include qrcode.js
To begin with, include the qrcode.js library in your HTML file.
<html>
<head>
<script src='https://cdn.jsdelivr.net/npm/qrcodejs/qrcode.js'></script>
</head>
If you are using npm, you can also install it by running the command below
npm i qrcodejs
At the end of the <body>, include the main javascript file qrcode-demo.js
<script src="js/qrcode-demo.js"></script>
</body>
</html>
# Step 2 : Create html element
Next, in index.html, create the HTML elements below
- an input element where user will enter the url
- a container element where the QR code will be rendered
<input id="url" type="text">
<div id="qrcode"></div>
# Step 3 : Generate the QR code using qrcode.js
qrcode.js provided a simple function to generate QR code, it also provided several optional parameters to allow you to control the QR Code size, color…
var url = $("#url").val();
var qrcode = new QRCode(
document.getElementById("qrcode"),
{
text: url
}
);
| Parameter | Usage |
|---|---|
text | Specifies the content of the QR code. It can be plain text, a URL, email address, phone number, or any other supported data type. |
width | Sets the width of the generated QR code in pixels. |
height | Sets the height of the generated QR code in pixels. |
colorDark | Specifies the color of the dark modules (e.g., black squares) in the QR code. It accepts a hexadecimal color value or CSS color name. |
colorLight | Specifies the color of the light modules (e.g., white spaces) in the QR code. It accepts a hexadecimal color value or CSS color name. |
correctLevel | Determines the error correction level of the QR code. Possible values are “L” (7% error recovery) “M” (15% error recovery) “Q” (25% error recovery) “H” (30% error recovery) The error correction level balances the data capacity and error recovery capability of the QR code. |
These parameters provide flexibility and customization options when using qrcode.js to generate QR codes in your web applications.
Besides the basic functions of generate QR Codes, in the demo above, I also added Download and Print QR Code functions. These additional functions enhance the versatility of the QR code generator, allowing users to save and print their generated QR codes for convenient offline use.
Features and Benefits
qrcode.js is an open-source JavaScript library that enables developers to generate QR codes directly within their web applications. It provides a straightforward and intuitive API that allows you to customize QR codes according to your requirements. Whether you want to generate simple text-based QR codes or more complex ones with various data types, qrcode.js has got you covered.
- Simple Integration: qrcode.js can be easily integrated into your web applications by including the library’s script file or by using package managers like npm or Yarn. Once integrated, you can start generating QR codes right away.
- Customizable QR Codes: qrcode.js allows you to customize various aspects of QR codes, including the data type, error correction level, size, and colors. Whether you want a basic black and white QR code or a more visually appealing one, you have the flexibility to style it to match your application’s aesthetics.
- Multiple Data Types: Apart from plain Text, qrcode.js supports various data types, including URLs, Email addresses, Phone numbers, SMS, and more. This versatility enables you to generate QR codes for different use cases, providing a seamless user experience.
- Error Correction: QR codes can often get damaged or partially obscured, making it difficult for scanners to read the data accurately. qrcode.js offers different error correction levels, allowing you to strike a balance between data capacity and error recovery capability. This ensures that your QR codes remain scannable even under challenging conditions.
Conclusion
qrcode.js is a versatile and user-friendly JavaScript library that simplifies the process of generating QR codes within web applications. Its customizable features, support for multiple data types, and error correction capabilities make it an excellent choice for developers looking to integrate QR code generation seamlessly. By leveraging qrcode.js, you can enhance the functionality of your web applications, enabling users to interact with your content in a convenient and efficient manner.
Thank you for reading. If you like this article, please share on Facebook or Twitter. Let me know in the comment if you have any questions. Follow me on Medium, GitHub and Linkedin. Support me on Ko-fi.