Design a QR Code Generator | HTML CSS and jQuery

QR code (Quick Response code) is a type of matrix (2D matrix) barcode that stores the textual data. The QR code data is scanned by QR code scanner to retrieve the data. It is used to get the addition information and used in many places like – website, posters, contact info or many other places.

QR Code Generator

QR code generator is an application that store some textual data and generate a code and the generated QR code is scanned by QR code scanner. After generating the QR code, we can save the generated image in PNG or SVG image format.

Approach: In this post, we will use Google Charts API to generate the QR code. Using jQuery, the QR code image to be displayed is updated according to the image returned by the API.

Root URL: https://chart.googleapis.com/chart?

The QR code requests support the following URL query parameters after the question mark (?) in the root of URL:

https://chart.googleapis.com/chart?

Explanation of the URL:

  • The root URL for Google Chart Infographics is https://chart.googleapis.com/chart. This can be specified with the required parameters to ger the desired output.
  • The chs parameter denotes the size of the QR code image in pixels.
  • The cht parameter denotes the type of the image to be created. The value “qr” will be used to generate a QR Code.
  • The chl parameter denotes the text or URL data to be encoded in the QR code.
ParameterRequired/OptionalDescription
cht=qrRequiredIt specifies the QR code.
chs=<width>x<height>RequiredIt specifies the image size.
chl=<data>RequiredIt specifies the encode of data. The data can be digits (0-9), alphanumeric characters, binary bytes of data, or Kanji. The QR code can not be generated of mix data types. The data must be UTF-8 URL-encoded. The maximum length of URL is 2K bytes,. If you want to encode data more than 2K bytes the you need to send your data using POST.
choe=<output_encoding>OptionalIt specifies how to encode the data in the QR code.
chld=<error_correction_level>|<margin>Optionalerror_correction_level: There are four levels of error supported by QR code to enable recovery of missing, misread, or obscured data. Supported values:
L – It is default value that allows the recovery up to 7% data loss.
M – It allows the recovery up to 15% data loss.
Q – It allows the recovery up to 25% data loss.
H – It allows the recovery up to 30% data loss.
margin: The width of the white border around the data portion of the code.

HTML Code: Filename – index.html

CSS Code: Filename – style.css

jQuery Code: Filename – script.js

Output:

QR Code Generator

Leave a Reply

Your email address will not be published. Required fields are marked *