Image QR Code Background Creator

/**
 * Creates a QR code with a given image placed in the center.
 * The QR code is drawn on a canvas, and the image is superimposed on top.
 * This function dynamically imports a QR code generation library.
 *
 * @param {Image} originalImg The JavaScript Image object to place in the center of the QR code.
 * @param {string} qrData The data (e.g., a URL) to encode in the QR code.
 * @param {number} imageScale A number between 0 and 1 representing the size of the central image relative to the QR code's total size. A value of 0.4 means the image will occupy 40% of the width and height. High values might make the QR code unreadable.
 * @param {string} qrColor The color of the dark modules of the QR code (e.g., '#000000').
 * @param {string} qrBackgroundColor The color of the light modules (background) of the QR code (e.g., '#ffffff').
 * @param {string} errorCorrectionLevel The error correction level for the QR code. Can be 'L' (low), 'M' (medium), 'Q' (quartile), or 'H' (high). 'H' is recommended when an image is overlaid.
 * @param {number} margin The width of the quiet zone border around the QR code, specified in modules.
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves with the canvas element containing the final image.
 */
async function processImage(originalImg, qrData = 'https://example.com', imageScale = 0.4, qrColor = '#000000', qrBackgroundColor = '#ffffff', errorCorrectionLevel = 'H', margin = 1) {
    let QRCode;

    // Dynamically import the 'qrcode' library from a reliable CDN.
    try {
        const qrModule = await import('https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.mjs');
        QRCode = qrModule.default;
    } catch (e) {
        console.error("Failed to load QRCode library:", e);
        // Create an error canvas to inform the user if the library fails to load.
        const errorCanvas = document.createElement('canvas');
        errorCanvas.width = 512;
        errorCanvas.height = 100;
        const ctx = errorCanvas.getContext('2d');
        ctx.fillStyle = '#fff0f0';
        ctx.fillRect(0, 0, errorCanvas.width, errorCanvas.height);
        ctx.fillStyle = 'red';
        ctx.font = 'bold 16px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('Error: Could not load the QR Code generation library.', errorCanvas.width / 2, errorCanvas.height / 2);
        return errorCanvas;
    }

    // Create a canvas element to draw on.
    const canvas = document.createElement('canvas');
    // Using a fixed size for predictability and quality.
    const canvasSize = 512;
    canvas.width = canvasSize;
    canvas.height = canvasSize;
    const ctx = canvas.getContext('2d');

    // QR Code generation options.
    const qrOptions = {
        errorCorrectionLevel: errorCorrectionLevel,
        margin: margin,
        width: canvasSize,
        color: {
            dark: qrColor,
            light: qrBackgroundColor,
        },
    };

    try {
        // 1. Draw the QR code onto the canvas.
        await QRCode.toCanvas(canvas, qrData, qrOptions);

        // 2. Draw the original image on top of the QR code.
        const imageDrawSize = canvasSize * imageScale;
        const imageX = (canvasSize - imageDrawSize) / 2;
        const imageY = (canvasSize - imageDrawSize) / 2;

        // Add a clearing box behind the image. This ensures that any transparency in the image
        // doesn't interfere with the QR code modules underneath, improving scannability.
        const padding = imageDrawSize * 0.05; // 5% padding around the image.
        ctx.fillStyle = qrBackgroundColor; // Use the QR background color for the padding.
        ctx.fillRect(
            imageX - padding,
            imageY - padding,
            imageDrawSize + padding * 2,
            imageDrawSize + padding * 2
        );

        // Draw the user's image in the center.
        ctx.drawImage(originalImg, imageX, imageY, imageDrawSize, imageDrawSize);

    } catch (err) {
        console.error("Failed to generate QR Code:", err);
        // Handle QR generation errors (e.g., data is too long).
        ctx.clearRect(0, 0, canvasSize, canvasSize); // Clear any partial drawing.
        ctx.fillStyle = '#fff0f0';
        ctx.fillRect(0, 0, canvasSize, canvasSize);
        ctx.fillStyle = 'red';
        ctx.font = 'bold 16px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(`Error generating QR Code:`, canvasSize / 2, canvasSize / 2 - 10);
        ctx.font = '14px Arial';
        ctx.fillText(err.message, canvasSize / 2, canvasSize / 2 + 15);
    }

    // Return the final canvas element.
    return canvas;
}