Supported QR Code Types
This page creates QR codes for five input types: Website URL, Plain Text, Email, Phone, and WhatsApp. The selected input type changes the field label and placeholder before the script formats the value for the QR code.
URL input keeps an existing http:// or https:// prefix, and adds https:// when no prefix is entered. Email input becomes a mailto: value. Phone input becomes a tel: value with spaces removed. WhatsApp input keeps digits only and creates a https://wa.me/ link.
QR Design Controls
The styling controls change the canvas generated by the QRCodeStyling library. The interface includes dot style, background color, dot color, marker border style and color, marker center style and color, and a transparent background option.
The Frames panel can use no frame, a simple border, a rounded border, a bold bottom bar, a top banner, or a bottom banner. When a frame is selected, the phrase field is limited to 20 characters and the frame uses the selected font and color controls.
Logo Image and PNG File
The logo file selector accepts PNG, JPG, SVG, and WEBP images. The JavaScript checks the selected file size and shows an alert when the logo is larger than 2 MB.
The Download PNG button saves the result as qrcode-toolzgarden.png. If a frame is active, the page draws the QR code and frame into one canvas before downloading the PNG.
Validation and Rendering
When the input is empty and you click Download PNG, the page highlights the input and shows: Please enter content to generate a QR code. If QR generation fails, the preview shows: Error generating QR code. Input may be too long.
The page loads qr-code-styling@1.6.0-rc.1 from unpkg and uses QRCodeStyling to render a 280 by 280 canvas in the browser.