A QR Code is a type of two-dimensional barcode that representing data in a visual, machine-readable form.
QR codes are ideal components for programmatically encoding data. They are often cused to ontain data for a locator, identifier, or tracker that points to a website or application.
QR Code rendering modes
QR Codes can be rendered as an <svg> and <canvas> element.
Using the svg rendering mode is recommended as the QR Code doesn't lose quality when it is zoomed.
QR Code Encoding Modes
The qrcode element supports the following encoding modes:
- Numeric
- Alphanumeric
- Byte / Binary
- Kanji
QR Code Error Correction Levels
The QR Code component supports all four error correction levels: L, M, Q, and H.
The higher the Error Correction Level, the higher is the amount of data that can be retrieved if part of the QR Code is damaged or hidden.
L level encoding of "Hello world"
H level encoding of "Hello world"
QR Code Embed Image
When the Error Correction Level is sufficiently high, it is possible to embed an Image inside the QR Code.
The maximum size of the image depends on the Error Correction Level and the QR Code value.
Appearance
The QR Code's color, background color and square dimensions can be customized by their respective properties.
The label of the QR Code can be set to visible or hidden with displayLabel. Its color, font, size, margins and position can be customized by their respective properties.
Demo
Rock Concert
For more information:
7-day Spa Vacation
For more information:
10-day Skiing Holiday
