Hello everyone π, this is going to be a very short article where I will show how can we generate a QR Code for any content in JavaScript.
Obviously, I am not going to implement everything from scratch and why should one do that when we have a plethora of useful libraries in JavaScript.
I came across this awesome lightweight library or you can say a simple script qrcodejs. It is very easy to use and is reliable too.
Implementation
Download this zip file: qrcodejs
Extract it.
Now you can use the
qrcode.js
andqrcode.min.js
file in your project.
Code
Include the qrcode.js
file in your HTML file.
...
<script src="./qrcode.js" defer></script>
...
Give an id
to the div
where you want to show the generated QR Code. Here I have used "qrcode"
as my id
.
...
<div id="qrcode"></div>
...
Now we will create an object from the QRCode
function. Need to pass the id
of the output div
which is "qrcode"
in this case.
var QR_CODE = new QRCode("qrcode", {
width: 220,
height: 220,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H,
});
correctLevel
:L
for low,M
for medium,H
for high.
Generate QRCode by calling the makeCode
method of the QRCode object, which expects the data
as its argument.
QR_CODE.makeCode("https://buymeacoffee.com/bibekkakati");
It will automatically insert the generated QRCode in the
div
whoseid
has been provided while creating the QRCode object.
Exampleβ¨
Check out the GitHub Repo.
Try it out here: Live.
Screenshot is taken from Google Lens while scanning.
Originally published on blog.bibekkakati.me
Thank you for reading π
If you enjoyed this article or found it helpful, give it a thumbs-up π
Feel free to connect π
Twitter | Instagram | LinkedIn
If you like my work and want to support it, you can do it here. I will really appreciate it.
Top comments (1)
Good post, but if anyone don't like jQuery based Qrcode.js, you can also use pure JS based library
github.com/amanuel/JS-HTML5-QRCode...
Check detailed article of using it and also how to read QR.
Read or Generate QR Code using Javascript
Thanks.