Image Scanner Interface Address Identifier Tool

async function processImage(originalImg, themeColor = "#00FF00", overlayDarkness = "0.5") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const w = originalImg.width;
    const h = originalImg.height;
    
    canvas.width = w;
    canvas.height = h;

    // Draw the base image
    ctx.drawImage(originalImg, 0, 0, w, h);

    // Utility function to load jsQR library to scan for URLs/Addresses
    const loadJsQR = () => {
        return new Promise((resolve, reject) => {
            if (window.jsQR) return resolve(window.jsQR);
            const script = document.createElement('script');
            script.src = 'https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.js';
            script.crossOrigin = 'anonymous';
            script.onload = () => resolve(window.jsQR);
            script.onerror = () => reject(new Error('Failed to load jsQR library'));
            document.head.appendChild(script);
        });
    };

    let qrReader = null;
    try {
        qrReader = await loadJsQR();
    } catch (e) {
        console.warn("QR Library failed. Operating in visual-only mode.");
    }

    let identifiedAddress = null;
    let qrRect = null;

    // Analyze image if library loaded successfully
    if (qrReader) {
        try {
            const imageData = ctx.getImageData(0, 0, w, h);
            const code = qrReader(imageData.data, w, h);
            if (code && code.data) {
                identifiedAddress = code.data;
                qrRect = code.location;
            }
        } catch (err) {
            console.error("Error reading image data. It might be blocked by CORS:", err);
        }
    }

    const darkness = Math.max(0, Math.min(1, parseFloat(overlayDarkness) || 0.5));
    
    // Draw overall dark overlay
    ctx.fillStyle = `rgba(0, 0, 0, ${darkness})`;
    ctx.fillRect(0, 0, w, h);

    // HUD Measurements
    const uiPadding = Math.max(10, Math.min(w, h) * 0.05);
    const cornerLength = Math.max(20, Math.min(w, h) * 0.15);
    ctx.lineWidth = Math.max(2, Math.min(w, h) * 0.005);
    ctx.strokeStyle = themeColor;
    ctx.fillStyle = themeColor;

    // Draw 4 scanner corners
    const drawCorner = (x, y, dx, dy) => {
        ctx.beginPath();
        ctx.moveTo(x + dx, y);
        ctx.lineTo(x, y);
        ctx.lineTo(x, y + dy);
        ctx.stroke();
    };

    drawCorner(uiPadding, uiPadding, cornerLength, cornerLength); // Top-left
    drawCorner(w - uiPadding, uiPadding, -cornerLength, cornerLength); // Top-right
    drawCorner(uiPadding, h - uiPadding, cornerLength, -cornerLength); // Bottom-left
    drawCorner(w - uiPadding, h - uiPadding, -cornerLength, -cornerLength); // Bottom-right

    // Draw faint crosshairs
    ctx.save();
    ctx.lineWidth = 1;
    ctx.setLineDash([Math.max(2, w * 0.01), Math.max(4, w * 0.02)]);
    ctx.strokeStyle = themeColor;
    ctx.globalAlpha = 0.5;
    ctx.beginPath();
    ctx.moveTo(w / 2, uiPadding);
    ctx.lineTo(w / 2, h - uiPadding);
    ctx.moveTo(uiPadding, h / 2);
    ctx.lineTo(w - uiPadding, h / 2);
    ctx.stroke();
    ctx.restore();

    // Reveal and highlight the identified QR/address region
    if (qrRect) {
        ctx.save();
        ctx.lineWidth = Math.max(3, w * 0.01);
        ctx.strokeStyle = '#FFFFFF';
        
        ctx.beginPath();
        ctx.moveTo(qrRect.topLeftCorner.x, qrRect.topLeftCorner.y);
        ctx.lineTo(qrRect.topRightCorner.x, qrRect.topRightCorner.y);
        ctx.lineTo(qrRect.bottomRightCorner.x, qrRect.bottomRightCorner.y);
        ctx.lineTo(qrRect.bottomLeftCorner.x, qrRect.bottomLeftCorner.y);
        ctx.closePath();
        ctx.stroke();

        // Highlight border glow
        ctx.shadowBlur = 15;
        ctx.shadowColor = themeColor;
        ctx.stroke();

        // Clear the darkened area for the QR code to be fully visible
        ctx.globalCompositeOperation = 'destination-out';
        ctx.fill();
        ctx.restore();
    }

    // Draw Scanning Laser Line
    const scanLineY = h * 0.5; // Center captured state
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(uiPadding, scanLineY);
    ctx.lineTo(w - uiPadding, scanLineY);
    ctx.lineWidth = Math.max(2, h * 0.005);
    ctx.strokeStyle = themeColor;
    ctx.shadowBlur = 20;
    ctx.shadowColor = themeColor;
    ctx.stroke();
    ctx.restore();

    // Typography Settings
    const baseFontSize = Math.max(12, Math.floor(h * 0.035));
    ctx.font = `bold ${baseFontSize}px "Courier New", Courier, monospace`;
    ctx.textBaseline = 'top';

    // HUD: Top-Left Specs
    ctx.textAlign = 'left';
    ctx.fillStyle = themeColor;
    ctx.fillText("SYS: SCANNER INTERFACE V1.0", uiPadding + 10, uiPadding + 10);
    ctx.fillText("MOD: ADDRESS IDENTIFICATON", uiPadding + 10, uiPadding + 15 + baseFontSize);

    // HUD: Top-Right Specs
    ctx.textAlign = 'right';
    ctx.fillText(`RES: ${w}x${h}`, w - uiPadding - 10, uiPadding + 10);
    ctx.fillText("TGT: WEB_URI", w - uiPadding - 10, uiPadding + 15 + baseFontSize);

    // Bottom Readout Console Area
    const consoleMsg = identifiedAddress 
        ? `[ ADDRESS IDENTIFIED ] : ${identifiedAddress}` 
        : "[ STATUS: NO WEBSITE INTERFACE ADDRESS IDENTIFIED ]";
        
    ctx.font = `bold ${Math.max(14, Math.floor(h * 0.04))}px "Courier New", Courier, monospace`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    const txtWidth = ctx.measureText(consoleMsg).width;
    const boxW = Math.min(w - (uiPadding * 2), txtWidth + 60);
    const boxH = Math.max(40, baseFontSize * 2.5);
    const boxX = (w / 2) - (boxW / 2);
    const boxY = h - uiPadding - cornerLength - boxH;

    // Console background (semi-transparent solid black logic)
    ctx.fillStyle = 'rgba(0, 0, 0, 0.85)';
    ctx.fillRect(boxX, boxY, boxW, boxH);
    
    ctx.strokeStyle = themeColor;
    ctx.lineWidth = 2;
    ctx.strokeRect(boxX, boxY, boxW, boxH);

    // Dynamic coloring based directly upon a confirmed scan
    ctx.fillStyle = identifiedAddress ? themeColor : '#FF4444'; 
    ctx.fillText(consoleMsg, w / 2, boxY + boxH / 2);

    return canvas;
}