QRCode Generator

This web application provides a QR Code Generator that allows users to create QR codes from any text or URL. The application uses the qrcode library for rendering and Bootstrap to provide a responsive interface.

For convenience, the page also supports URL parameters so it can be preloaded with a default text and QR code size. This makes it useful for sharing links that automatically generate a specific QR code.

A live version of the app is available here.

HTML Structure

The page consists of three main sections:

• Text Input: A text field where users can enter the text or URL to encode.

• Preview Area: A dedicated container where the generated QR code is displayed.

• Size Slider: A slider that lets users adjust the QR code size between predefined limits.

A Generate QR Code button allows users to regenerate the code at any time.

The overall layout is centered using Bootstrap cards, creating a compact interface that works well on both desktop and mobile devices.

Styling with CSS

Only a small amount of custom CSS is required.

The preview container uses Flexbox to center the generated QR code both horizontally and vertically while reserving enough space for larger images.

#qrcontainer {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 550px;
}

#qrcode {
    display: flex;
    justify-content: center;
    width: 100%;
}

Since the QR code is rendered on a <canvas>, no additional styling is necessary beyond ensuring it remains centered within the page.

JavaScript for QR Code Generation

The JavaScript initializes the application by reading optional URL parameters, creating the size slider, and generating the first QR code.

The page accepts two optional query parameters:

• text – the text or URL to encode.

• qrsize – the QR code size in pixels (between 256 and 1024).

For example:

/apps/sandbox/qrcode-generator/?text=https://www.azimonti.com&qrsize=768

Helper functions read these parameters and provide sensible defaults when they are not present or contain invalid values.

The QR code generation itself is based on the library API:

async function generateQr() {
    const text = $.trim($("#qrText").val());

    $("#qrcode").empty();

    const canvas = document.createElement("canvas");
    $("#qrcode").append(canvas);

    await QRCode.toCanvas(canvas, text, {
        width: qrSize
    });
}

Whenever the user clicks the Generate QR Code button, or changes the size slider, the existing canvas is cleared and a new QR code is rendered using the selected dimensions.

The size slider is implemented with noUiSlider, allowing users to resize the QR code interactively. The current value is displayed alongside the slider, and the QR code is regenerated automatically whenever the slider value changes.

Finally, the application loads the initial values from the URL, updates the user interface, and generates the first QR code immediately after the page is opened.

Conclusion

This QR Code Generator demonstrates how a small amount of JavaScript can be combined with the qrcode library to build a responsive and user-friendly web application. By supporting URL parameters for the initial text and QR code size, the page can easily be shared to generate predefined QR codes without requiring any additional user input.