The jquery.qrcode.js library enables developers to generate QR codes entire within the browser environment. This client-side plugin, available on GitHub, operates without reliance on external backend services or image downloads. It is lightweight, with a minified footprint of less than 4KB, making it an efficient solution for web applications.

Configuration Options

To control the output, the plugin accepts a configuration object with the following properties:

• text: The URL or string data to be encoded into the QR code.
• render: Specifies the rendering method. Options are "canvas" (default) or "table".
• width / height: Defines the dimensions of the generated QR code in pixels.
• typeNumber: Determines the QR code version (calculation mode); defaults to -1 for auto-detection.
• correctLevel: Sets the error correction tolerance (0, 1, 2, or 3).
• background: The background color of the QR code (e.g., "#ffffff").
• foreground: The color of the QR code modules/dots (e.g., "#000000").

Implementation Guide

First, include the jQuery library and the plugin script in your HTML document:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.qrcode@1.0.0/jquery.qrcode.min.js"></script>

Next, create a target container element where the code will be rendered:

<div id="qr-container"></div>

Finally, initialize the plugin using jQuery. The simplest method involves passing a string directly. For more control, pass a configuration object:

// Direct invocation
$('#qr-container').qrcode("https://example.com");

// Advanced configuration
$('#qr-container').qrcode({
    render: "canvas",
    width: 128,
    height: 128,
    correctLevel: 0,
    text: "https://example.com"
});

Troubleshooting Common Isssues

1. Scanning Failures in Desktop Browsers

In certain versions of desktop browsers (such as Chrome), QR codes generated via the Canvas API may sometimes fail to scan due to rendering specifics. A reliable workaround is to switch the rendering mode to table:

$('#qr-container').qrcode({
    render: "table",
    width: 256,
    height: 256,
    text: "https://example.com"
});

2. Scanning Failures in Mobile Browsers or WeChat

Conversely, mobile environments—including embedded browsers like WeChat or QQ—often handle the canvas rendering method more effectively than table-based layouts. Ensure the default canvas renderer is active for these platforms:

$('#qr-container').qrcode({
    width: 256,
    height: 256,
    text: "https://example.com"
});

3. Support for Non-ASCII Characters (e.g., Chinese)

The jquery.qrcode library utilizes charCodeAt() for encoding, which defaults to UTF-16. Most standard QR decoders expect UTF-8 encoding. Since UTF-16 uses 2 bytes for characters while UTF-8 may use 3, mismatched encoding causes scanning failures for non-ASCII text.

To resolve this, convert the string to UTF-8 before generating the code. The following utility function handles this conversion:

$('#qr-container').qrcode({
    width: 256,
    height: 256,
    text: toUtf8("这里是非ASCII字符的测试")
});

function toUtf8(str) {
    let result = "";
    for (let i = 0; i < str.length; i++) {
        const c = str.charCodeAt(i);
        if (c < 128) {
            result += str.charAt(i);
        } else if (c > 127 && c < 2048) {
            result += String.fromCharCode((c >> 6) | 192);
            result += String.fromCharCode((c & 63) | 128);
        } else {
            result += String.fromCharCode((c >> 12) | 224);
            result += String.fromCharCode(((c >> 6) & 63) | 128);
            result += String.fromCharCode((c & 63) | 128);
        }
    }
    return result;
}