How to Generate Dynamic QR Codes Securely in the Browser

QR Codes: Simpler Than You Think

QR codes are a standardized 2D matrix barcode format (ISO/IEC 18004). Their encoding algorithm — Reed-Solomon error correction over GF(256) — is well-understood and fast enough to run on a potato from 2008.

There is absolutely no reason to send your QR code data to a server. Yet most online QR generators do exactly that, logging every URL you encode for analytics and monetization.

The Library: qrcode.js

ElevenTools QR Code Generator uses qrcode — a pure JavaScript QR code generator that works in Node.js and browsers alike.

import QRCode from 'qrcode';

async function generateQR(
  content: string, 
  options: { errorCorrectionLevel?: 'L' | 'M' | 'Q' | 'H'; margin?: number; color?: { dark: string; light: string } }
): Promise {
  return QRCode.toDataURL(content, {
    errorCorrectionLevel: options.errorCorrectionLevel || 'M',
    margin: options.margin || 2,
    color: options.color || { dark: '#000000', light: '#FFFFFF' },
    width: 1024, // High resolution for print
  });
}

Error Correction Levels

QR codes have four error correction levels that trade data capacity for resilience:

| Level | Data Recovery | Best For |

|---|---|---|

| L | 7% | Digital screens, clean conditions |

| M | 15% | General purpose (default) |

| Q | 25% | Light industrial/outdoor |

| H | 30% | Logo overlay, rough conditions |

QR Code Generator defaults to M but automatically upgrades to H when a logo overlay is added, since the logo visually obscures part of the QR data.

Logo Overlay

Embedding a brand logo in a QR code is a popular customization:

function overlayLogo(qrDataUrl: string, logoFile: File): Promise {
  return new Promise((resolve) => {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d')!;
    const qrImg = new Image();

    qrImg.onload = () => {
      canvas.width = qrImg.width;
      canvas.height = qrImg.height;
      ctx.drawImage(qrImg, 0, 0);

      const logoImg = new Image();
      const logoUrl = URL.createObjectURL(logoFile);

      logoImg.onload = () => {
        // Center logo at 20% of QR size
        const size = qrImg.width * 0.2;
        const x = (qrImg.width - size) / 2;
        const y = (qrImg.height - size) / 2;

        // White background behind logo for readability
        ctx.fillStyle = '#FFFFFF';
        ctx.fillRect(x - 4, y - 4, size + 8, size + 8);
        ctx.drawImage(logoImg, x, y, size, size);

        URL.revokeObjectURL(logoUrl);
        resolve(canvas.toDataURL('image/png'));
      };

      logoImg.src = logoUrl;
    };

    qrImg.src = qrDataUrl;
  });
}

Privacy: Nothing Is Transmitted

The URL, WiFi password, vCard data, or any other content you encode into a QR code via ElevenTools stays entirely in your browser. We have no knowledge of what you're encoding.

Try QR Code Generator at /qr-code-generator.