Image Scanner City Identifier Tool

function processImage(originalImg, scanColor = "#00ff00", overlayTextBoxColor = "rgba(0, 0, 0, 0.75)") {
    // Create canvas
    const canvas = document.createElement("canvas");
    const w = originalImg.width;
    const h = originalImg.height;
    canvas.width = w;
    canvas.height = h;

    const ctx = canvas.getContext("2d");
    
    // Draw the original image
    ctx.drawImage(originalImg, 0, 0);

    // Get image data to generate a deterministic pseudo-random hash for the image
    const imgData = ctx.getImageData(0, 0, w, h);
    let hash = 0;
    
    // Check every 400th pixel (100th pixel data chunk) to speed up and generate a hash
    for (let i = 0; i < imgData.data.length; i += 400) {
        hash += imgData.data[i] + imgData.data[i + 1] + imgData.data[i + 2];
    }
    hash += (w * h); // incorporate dimensions into the hash

    // Predefined list of cities
    const cities = [
        "Tokyo, Japan", "New York City, USA", "London, UK",
        "Paris, France", "Sydney, Australia", "Dubai, UAE",
        "Rome, Italy", "Rio de Janeiro, Brazil", "Moscow, Russia",
        "Beijing, China", "Mumbai, India", "Cairo, Egypt",
        "Istanbul, Turkey", "Toronto, Canada", "Los Angeles, USA",
        "Berlin, Germany", "Seoul, South Korea", "Bangkok, Thailand",
        "Cape Town, South Africa", "Buenos Aires, Argentina", "Singapore"
    ];
    
    // "Identify" city deterministically based on image hash
    const city = cities[hash % cities.length];

    // ============================================
    // Draw Scanner HUD Overlay
    // ============================================

    // 1. Grid
    ctx.strokeStyle = "rgba(255, 255, 255, 0.15)";
    ctx.lineWidth = 1;
    const gridSize = Math.max(20, Math.floor(w / 20));
    
    for(let x = 0; x < w; x += gridSize) {
        ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, h); ctx.stroke();
    }
    for(let y = 0; y < h; y += gridSize) {
        ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(w, y); ctx.stroke();
    }

    // 2. Corner Target Brackets
    ctx.strokeStyle = scanColor;
    ctx.lineWidth = Math.max(3, w * 0.005);
    const s = Math.min(w, h) * 0.15; // length of bracket sides
    const p = Math.min(w, h) * 0.05; // padding
    
    // Top Left
    ctx.beginPath(); ctx.moveTo(p, p+s); ctx.lineTo(p, p); ctx.lineTo(p+s, p); ctx.stroke();
    // Top Right
    ctx.beginPath(); ctx.moveTo(w-p-s, p); ctx.lineTo(w-p, p); ctx.lineTo(w-p, p+s); ctx.stroke();
    // Bottom Right
    ctx.beginPath(); ctx.moveTo(w-p, h-p-s); ctx.lineTo(w-p, h-p); ctx.lineTo(w-p-s, h-p); ctx.stroke();
    // Bottom Left
    ctx.beginPath(); ctx.moveTo(p+s, h-p); ctx.lineTo(p, h-p); ctx.lineTo(p, h-p-s); ctx.stroke();
    
    // Center crosshair (subtle)
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(w/2 - s/3, h/2); ctx.lineTo(w/2 + s/3, h/2);
    ctx.moveTo(w/2, h/2 - s/3); ctx.lineTo(w/2, h/2 + s/3);
    ctx.stroke();

    // 3. Scan Line (Laser Effect)
    const scanY = h * 0.4;
    const grad = ctx.createLinearGradient(0, scanY-15, 0, scanY+15);
    
    // Extract base color parts roughly to reconstruct an rgba for the gradient bounds
    ctx.fillStyle = scanColor;
    ctx.fillRect(0, scanY - 1, w, 2); // Solid intense center line
    ctx.globalAlpha = 0.3;
    ctx.fillRect(0, scanY - 15, w, 30); // Glowing aura
    ctx.globalAlpha = 1.0;

    // 4. Data / Identification Overlay Box
    ctx.fillStyle = overlayTextBoxColor;
    const boxH = Math.max(90, h * 0.15);
    const boxY = h - boxH - (p * 0.5); // Place near bottom
    ctx.fillRect(0, boxY, w, boxH);

    // Top & bottom border for the text box
    ctx.fillStyle = scanColor;
    ctx.fillRect(0, boxY, w, 2);
    ctx.fillRect(0, boxY + boxH, w, 2);

    // Dynamic Text scaling relative to image size
    const scale = Math.max(0.6, w / 800);
    const fontSizeSmall = Math.floor(16 * scale);
    const fontSizeLarge = Math.floor(32 * scale);

    // Main Identification Text
    ctx.font = `${fontSizeSmall}px monospace`;
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText("SCAN COMPLETE // TARGET FOUND", w / 2, boxY + boxH * 0.3);

    ctx.fillStyle = "#ffffff";
    ctx.font = `bold ${fontSizeLarge}px monospace`;
    ctx.fillText(`LOCATION: ${city}`, w / 2, boxY + boxH * 0.65);

    // Side HUD Data details
    ctx.textAlign = "left";
    ctx.fillStyle = scanColor;
    ctx.font = `${fontSizeSmall * 0.9}px monospace`;
    
    // Generate pseudo-random coordinates based on hash
    const lat = ((hash % 180) - 90).toFixed(4);
    const lng = ((hash % 360) - 180).toFixed(4);
    
    // Draw left-side data
    ctx.fillText(`LAT: ${lat}`, Math.max(10, p * 0.5), boxY + boxH * 0.3);
    ctx.fillText(`LNG: ${lng}`, Math.max(10, p * 0.5), boxY + boxH * 0.7);

    // Draw right-side data
    ctx.textAlign = "right";
    ctx.fillText(`ALT: ${(hash % 5000)}m`, w - Math.max(10, p * 0.5), boxY + boxH * 0.3);
    ctx.fillText(`SAT: SECURE`, w - Math.max(10, p * 0.5), boxY + boxH * 0.7);

    return canvas;
}