jquery.qrcode.js is a jQuery plugin for generating QR codes dynamically. It requires jQuery to function, so you need to load jQuery before loading this plugin.

<script type='text/javascript' src='js/jquery.min.js'></script>
<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>

Add a div element in your HTML to serve as the rendering area:

<div id="qrcode"></div>

The folowing code generates a default 256×256 pixel QR code:

<script type="text/javascript">
    jQuery('#qrcode').qrcode("http://example.com");
</script>

Simple, right? You can now create QR codes effortlessly.

To customize the size, colors, or other properties, you can pass a configuration object:

jQuery("#qrcode").qrcode({
    render: "canvas", // Rendering method: 'table' or 'canvas'
    width: 256,       // Width in pixels
    height: 256,      // Height in pixels
    text: "http://example.com", // QR code content
    typeNumber: -1,   // Calculation mode, typically -1
    correctLevel: 2,  // Error correction level
    background: "#ffffff", // Background color
    foreground: "#000000"  // QR code color
});

jquery.qrcode.js does not natively support Chinese characters because it uses UTF-16 encoding, while QR codes typically require UTF-8. To support Chinese text, convert the content to UTF-8 using the folllowing functino:

function utf16to8(str) {
    var out, i, len, c;
    out = "";
    len = str.length;
    for(i = 0; i < len; i++) {
        c = str.charCodeAt(i);
        if ((c >= 0x0001) && (c <= 0x007F)) {
            out += str.charAt(i);
        } else if (c > 0x07FF) {
            out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
            out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
            out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
        } else {
            out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
            out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
        }
    }
    return out;
}

Then use the function when setting the text:

text: utf16to8("文字内容") // Chinese text content

If you need to overlay a custom logo on the QR code (which the plugin does not support directly), you can achieve this by placing an <img> element inside the div and using CSS positioning:

<div id="qrcode" style="position: relative;">
    <img src="logo.png" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" />
</div>