Image To Wifi QR Code Generator

async function processImage(originalImg, ssid = "My Network", password = "password", encryption = "WPA", hidden = "false", qrColor = "#000000", bgColor = "#ffffff") {
    // Dynamically load the 'qrcode' library for generating QR codes
    await new Promise((resolve, reject) => {
        if (window.QRCode) {
            resolve();
            return;
        }
        const script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js';
        script.onload = () => resolve();
        script.onerror = () => reject(new Error('Failed to load QRCode library.'));
        document.head.appendChild(script);
    });

    // Helper function to escape special characters for the WiFi string format
    const escapeWifiString = (str) => {
        return str.replace(/([\\;:])/g, '\\$1');
    };

    // Construct the standardized WiFi credential string
    let wifiStr = `WIFI:S:${escapeWifiString(ssid)};T:${encryption};`;
    if (encryption !== 'nopass') {
        wifiStr += `P:${escapeWifiString(password)};`;
    }
    if (hidden === 'true') {
        wifiStr += `H:true;`;
    }
    wifiStr += `;`;

    // Create a canvas and generate the QR code
    const canvas = document.createElement('canvas');
    const size = 512;
    canvas.width = size;
    canvas.height = size;

    await new Promise((resolve, reject) => {
        window.QRCode.toCanvas(canvas, wifiStr, {
            width: size,
            margin: 2,
            errorCorrectionLevel: 'H', // Use highest error correction to safely fit the logo
            color: {
                dark: qrColor,
                light: bgColor
            }
        }, (error) => {
            if (error) reject(error);
            else resolve();
        });
    });

    // Embed the original image into the center of the QR code as a logo
    if (originalImg && originalImg.width > 0 && originalImg.height > 0) {
        const ctx = canvas.getContext('2d');
        const logoRatio = 0.25; // Logo takes up 25% of the overall dimensions
        const maxLogoSize = size * logoRatio;
        
        // Calculate new image sizes to maintain aspect ratio
        let imgW = originalImg.width;
        let imgH = originalImg.height;
        const maxDim = Math.max(imgW, imgH);
        const scale = maxLogoSize / maxDim;
        
        imgW *= scale;
        imgH *= scale;
        
        const x = (size - imgW) / 2;
        const y = (size - imgH) / 2;
        
        // Draw a solid background to make the logo legible against the QR code
        ctx.fillStyle = bgColor;
        const padding = 8;
        ctx.fillRect(x - padding, y - padding, imgW + (padding * 2), imgH + (padding * 2));
        
        // Draw the image
        ctx.drawImage(originalImg, x, y, imgW, imgH);
    }

    return canvas;
}