DEV Community

loading...
Cover image for Generate QR Code In Javascript

Generate QR Code In Javascript

bibekkakati profile image Bibek Originally published at blog.bibekkakati.me ・Updated on ・2 min read

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>
...
Enter fullscreen mode Exit fullscreen mode

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>
...
Enter fullscreen mode Exit fullscreen mode

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,
});
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

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.


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.



Discussion (0)

Forem Open with the Forem app