QR code generation and reading using Javascript 25th Sep 2020

In this blog we will see how to gerenate QR code on your website and read it as well.

What we will achieve at the end of this blog

At the end of this tutorial, we will see how to generate and read QRcodes using Javascript

Source code of the functionality Github Link

Below is a quick demo to wrap your head around to what we are trying to achieve

JS to be downloaded
• QRCode Generator Link to download
• QRCode Decoder Link to download
• jQuery Link to download
• Bootstrap Link to download
• Bootstrap CSS Link to download

P.SI modified the original QRCodeGenerator script (QRCode Generator) a bit since I found that "clear()" function was not doing the intended thing i.e clearing the existing "QRCode". It might be a bug or so but am not sure. Anyway, I modified the script and in my source code am using "qrcode_ms.js" which has one extra function which clears the QRCode. You can download the Javascript file from my git repository if you cant make "clear()" work with original script

In the demo code you will see 2 approaches.First one is hardcoded QR code. You can just use any QRScanner app and scan the code Second One is an approach which allows user to enter any value and a corresponding QR code will be generated dynamically. Then you can click on "Read QRCode generated above" button which will read the QRCode programitically and display the value(you entered initially)

So this ends this tutorial where we saw various ways to generate and read QR Codes.You can download the code I shared from Github and extend it if you wish.Please feel free to leave comments or questions below.Alterantively email me at "techspacedeck@gmail.com"