Generating a QR Code using HTML and JQuery
What is a QR Code?
A QR code or a Quick Response code is a type of matrix barcode that contains data, usually text or URLs. A QR code uses four encoding modes namely, numeric, alphanumeric, byte/binary, and Kanji.
How can I create my own QR Code?
We can create our own QR code by using the Google Chart API and guess what? It’s free! Today, we will see how can we create a QR code using just a few lines of code.
Description of the HTML Page
We will create a form that will allow the user to enter a URL. The form will contain a button that will say ‘Generate QR Code’. Upon clicking this, a QR code will be generated and shown to the user.
Implementation
Look at the code below. I have used Bootstrap to enhance the design of the form.
Look at the JavaScript written. The Javascript simply adds the source of the <img> tag to the Google Chart API.
Parameters of the Google Chart API to generate QR code:
1. cht (required): Specifies the Chart type, qr in our case
2. chs (required): Specifies the Chart Size. I have fixed 400px in the URL.
3. chl (required): Data for which QR code is to be generated. Entered URL, in our case.
4. choe (optional): Output encoding. Default is UTF-8.
5. chld (optional): Error Correction Level. QR codes support four levels of error correction to enable recovery of missing, misread, or obscured data.
To read more about these parameters, visit the official documentation by at: https://developers.google.com/chart/infographics/docs/qr_codes
End Result
The end result of our program or the HTML page is
On scanning this we can visit the URL that was entered in the text box.
This was the implementation of creating a QR Code using HTML and JQuery. I hope that helps you.
