Generate QR Code In Javascript

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

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 and qrcode.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 whose id has been provided while creating the QRCode object.

Example✨

Check out the GitHub Repo.

Try it out here: Live.

Demo Image

Screenshot is taken from Google Lens while scanning.


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

Interested in reading more such articles from Bibek Kakati?

Support the author by donating an amount of your choice.

Recent sponsors
Catalin Pit's photo

This got me interested!

I will create some QR Codes for my stuff. Thank you!

Edidiong Asikpo's photo

You made this very simple and straight to the point, Bibek Kakati. Thanks for sharing.

Bibek Kakati's photo

I'm glad you liked it.

Olubisi Idris Ayinde's photo

This is pretty interesting πŸŽ‰ thank you for sharing Bibek Kakati