Image City View And ID Scanner Tool

function processImage(originalImg, overlayColor = '#00ff00', scannerPosition = 0.45, cityName = 'NEW TOKYO', idText = 'ID-X992-841') {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    canvas.width = originalImg.width;
    canvas.height = originalImg.height;

    // Draw original image
    ctx.drawImage(originalImg, 0, 0);

    // Apply color tint for HUD display effect
    ctx.fillStyle = overlayColor;
    ctx.globalAlpha = 0.15;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.globalAlpha = 1.0;

    // Draw Grid overlay
    ctx.strokeStyle = overlayColor;
    ctx.globalAlpha = 0.2;
    ctx.lineWidth = 1;
    const gridSize = Math.max(20, canvas.width / 25);
    for (let x = 0; x < canvas.width; x += gridSize) {
        ctx.beginPath();
        ctx.moveTo(x, 0);
        ctx.lineTo(x, canvas.height);
        ctx.stroke();
    }
    for (let y = 0; y < canvas.height; y += gridSize) {
        ctx.beginPath();
        ctx.moveTo(0, y);
        ctx.lineTo(canvas.width, y);
        ctx.stroke();
    }
    ctx.globalAlpha = 1.0;

    // Helper Function for Hex to RGB conversion
    const hexToRgb = (hex) => {
        let r = 0, g = 255, b = 0; // Default to green
        if (typeof hex === 'string' && hex.startsWith('#')) {
            const h = hex.replace('#', '');
            if (h.length === 3) {
                r = parseInt(h[0] + h[0], 16);
                g = parseInt(h[1] + h[1], 16);
                b = parseInt(h[2] + h[2], 16);
            } else if (h.length === 6) {
                r = parseInt(h.substring(0, 2), 16);
                g = parseInt(h.substring(2, 4), 16);
                b = parseInt(h.substring(4, 6), 16);
            }
        }
        return `${r},${g},${b}`;
    };

    const rgb = hexToRgb(overlayColor);

    // Draw glowing scanner Line
    const scanY = canvas.height * scannerPosition;
    const scanHeight = Math.max(30, canvas.height / 15);
    const gradient = ctx.createLinearGradient(0, scanY - scanHeight, 0, scanY);
    gradient.addColorStop(0, `rgba(${rgb}, 0)`);
    gradient.addColorStop(1, `rgba(${rgb}, 0.5)`);
    
    ctx.fillStyle = gradient;
    ctx.fillRect(0, scanY - scanHeight, canvas.width, scanHeight);

    ctx.shadowColor = overlayColor;
    ctx.shadowBlur = 15;
    ctx.strokeStyle = overlayColor;
    ctx.lineWidth = 4;
    ctx.beginPath();
    ctx.moveTo(0, scanY);
    ctx.lineTo(canvas.width, scanY);
    ctx.stroke();
    ctx.shadowBlur = 0;

    // Draw UI HUD Corners
    const cornerSize = Math.max(30, canvas.width / 15);
    const m = Math.max(10, canvas.width / 30); // margin
    ctx.lineWidth = Math.max(2, canvas.width / 150);
    ctx.beginPath();
    
    // Top Left Frame
    ctx.moveTo(m, m + cornerSize);
    ctx.lineTo(m, m);
    ctx.lineTo(m + cornerSize, m);
    
    // Top Right Frame
    ctx.moveTo(canvas.width - m - cornerSize, m);
    ctx.lineTo(canvas.width - m, m);
    ctx.lineTo(canvas.width - m, m + cornerSize);
    
    // Bottom Left Frame
    ctx.moveTo(m, canvas.height - m - cornerSize);
    ctx.lineTo(m, canvas.height - m);
    ctx.lineTo(m + cornerSize, canvas.height - m);
    
    // Bottom Right Frame
    ctx.moveTo(canvas.width - m - cornerSize, canvas.height - m);
    ctx.lineTo(canvas.width - m, canvas.height - m);
    ctx.lineTo(canvas.width - m, canvas.height - m - cornerSize);
    ctx.stroke();

    // Draw Crosshair Targeter
    const cx = canvas.width / 2;
    const cy = canvas.height / 2;
    const cr = cornerSize / 2;
    ctx.lineWidth = Math.max(1, canvas.width / 300);
    ctx.beginPath();
    ctx.arc(cx, cy, cr, 0, Math.PI * 2);
    ctx.moveTo(cx - cr - 15, cy);
    ctx.lineTo(cx - cr + 5, cy);
    ctx.moveTo(cx + cr + 15, cy);
    ctx.lineTo(cx + cr - 5, cy);
    ctx.moveTo(cx, cy - cr - 15);
    ctx.lineTo(cx, cy - cr + 5);
    ctx.moveTo(cx, cy + cr + 15);
    ctx.lineTo(cx, cy + cr - 5);
    ctx.stroke();

    // Contextual Text Overlay
    const fontSize = Math.max(12, canvas.width / 40);
    ctx.font = `bold ${fontSize}px monospace`;
    ctx.fillStyle = overlayColor;
    ctx.shadowColor = '#000000';
    ctx.shadowBlur = 5;
    
    // Text: Top Left
    ctx.textAlign = 'left';
    ctx.textBaseline = 'top';
    ctx.fillText(`CITY VIEW: ${cityName}`, m + 10, m + 10);
    ctx.fillText(`STATUS: ACTIVE`, m + 10, m + fontSize + 15);

    // Text: Top Right
    ctx.textAlign = 'right';
    ctx.fillText(`SCANNER ID`, canvas.width - m - 10, m + 10);
    ctx.fillText(idText, canvas.width - m - 10, m + fontSize + 15);

    // Text: Bottom Left
    ctx.textAlign = 'left';
    ctx.textBaseline = 'bottom';
    const lat = (Math.random() * 180 - 90).toFixed(4); // Faux GPS Coordinates
    const lon = (Math.random() * 360 - 180).toFixed(4);
    ctx.fillText(`LAT: ${lat}`, m + 10, canvas.height - m - fontSize - 15);
    ctx.fillText(`LON: ${lon}`, m + 10, canvas.height - m - 10);

    // Text: Bottom Right
    ctx.textAlign = 'right';
    ctx.fillText(`TARGET LOCKED`, canvas.width - m - 10, canvas.height - m - 10);
    ctx.shadowBlur = 0;

    // Add some random digital data blocks for sci-fi atmosphere
    ctx.globalAlpha = 0.5;
    ctx.textAlign = 'left';
    ctx.textBaseline = 'top';
    const numBlocks = Math.floor(Math.random() * 10) + 5;
    for (let i = 0; i < numBlocks; i++) {
        const blkX = canvas.width - m - 150 - Math.random() * 50;
        const blkY = canvas.height * 0.3 + (Math.random() * canvas.height * 0.4);
        const chars = '0123456789ABCDEF!@#$';
        let str = '';
        for (let j = 0; j < 8; j++) {
            str += chars.charAt(Math.floor(Math.random() * chars.length));
        }
        ctx.fillText(str, blkX, blkY);
    }
    ctx.globalAlpha = 1.0;

    return canvas;
}