Generate QR Code In Javascript

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…


This content originally appeared on DEV Community and was authored by Bibek

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.

Enjoyed? Give it a thumbs-up ?

Thank you for reading | Feel free to connect ?

Originally published on blog.bibekkakati.me


This content originally appeared on DEV Community and was authored by Bibek


Print Share Comment Cite Upload Translate Updates
APA

Bibek | Sciencx (2021-05-10T14:05:24+00:00) Generate QR Code In Javascript. Retrieved from https://www.scien.cx/2021/05/10/generate-qr-code-in-javascript/

MLA
" » Generate QR Code In Javascript." Bibek | Sciencx - Monday May 10, 2021, https://www.scien.cx/2021/05/10/generate-qr-code-in-javascript/
HARVARD
Bibek | Sciencx Monday May 10, 2021 » Generate QR Code In Javascript., viewed ,<https://www.scien.cx/2021/05/10/generate-qr-code-in-javascript/>
VANCOUVER
Bibek | Sciencx - » Generate QR Code In Javascript. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/05/10/generate-qr-code-in-javascript/
CHICAGO
" » Generate QR Code In Javascript." Bibek | Sciencx - Accessed . https://www.scien.cx/2021/05/10/generate-qr-code-in-javascript/
IEEE
" » Generate QR Code In Javascript." Bibek | Sciencx [Online]. Available: https://www.scien.cx/2021/05/10/generate-qr-code-in-javascript/. [Accessed: ]
rf:citation
» Generate QR Code In Javascript | Bibek | Sciencx | https://www.scien.cx/2021/05/10/generate-qr-code-in-javascript/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts