Website Icon Search Topic Identifier Scanner

function processImage(originalImg, themeColor = "#00ffcc", scanProgress = "65") {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    
    // Scale image to a readable size, especially for small favicons
    const targetSize = Math.max(300, Math.min(600, originalImg.width)); 
    let scale = targetSize / Math.max(originalImg.width, originalImg.height);
    
    if (originalImg.width > 800 || originalImg.height > 800) {
        scale = 600 / Math.max(originalImg.width, originalImg.height);
    } else if (originalImg.width < 100 || originalImg.height < 100) {
        scale = 300 / Math.max(originalImg.width, originalImg.height);
    } else {
        scale = 1; // Keep original if it's moderate size
    }
    
    const iw = originalImg.width * scale;
    const ih = originalImg.height * scale;
    
    const pad = 80;
    canvas.width = iw + pad * 2;
    canvas.height = ih + pad * 2;
    
    // Pixelated scaling for small icons looks high-tech!
    ctx.imageSmoothingEnabled = false;

    // Background
    ctx.fillStyle = "#0a0a0a";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    // Draw original image initially (darkened context)
    ctx.drawImage(originalImg, pad, pad, iw, ih);
    
    // Scanner Overlay Dimming
    ctx.fillStyle = "rgba(0,0,0,0.75)";
    ctx.fillRect(pad, pad, iw, ih);
    
    const stats = {
        pixels: originalImg.width * originalImg.height,
        ratio: (originalImg.width / originalImg.height).toFixed(2),
        width: originalImg.width,
        height: originalImg.height
    };
    
    // Grid overlay
    ctx.beginPath();
    ctx.strokeStyle = themeColor;
    ctx.globalAlpha = 0.2;
    const gridSize = Math.max(10, scale); 
    for (let x = 0; x <= iw; x += gridSize) {
        ctx.moveTo(pad + x, pad);
        ctx.lineTo(pad + x, pad + ih);
    }
    for (let y = 0; y <= ih; y += gridSize) {
        ctx.moveTo(pad, pad + y);
        ctx.lineTo(pad + iw, pad + y);
    }
    ctx.lineWidth = 1;
    ctx.stroke();
    
    ctx.globalAlpha = 1.0;
    
    // Scanline Y
    const scanProg = Math.max(0, Math.min(100, Number(scanProgress)));
    const scanY = pad + (ih * (scanProg / 100));
    const scanAreaHeight = Math.max(0, scanY - pad);
    
    // Revealed section above the scanline
    ctx.globalAlpha = 1.0;
    ctx.save();
    ctx.beginPath();
    ctx.rect(pad, pad, iw, scanAreaHeight);
    ctx.clip();
    ctx.drawImage(originalImg, pad, pad, iw, ih);
    ctx.restore();

    // Re-apply a very light scanner tint to the revealed part
    ctx.fillStyle = themeColor;
    ctx.globalAlpha = 0.15;
    ctx.fillRect(pad, pad, iw, scanAreaHeight);
    
    // The main glowing scanline
    ctx.globalAlpha = 0.9;
    ctx.shadowColor = themeColor;
    ctx.shadowBlur = 20;
    ctx.beginPath();
    ctx.moveTo(pad - 10, scanY);
    ctx.lineTo(pad + iw + 10, scanY);
    ctx.lineWidth = 4;
    ctx.strokeStyle = themeColor;
    ctx.stroke();
    ctx.shadowBlur = 0;
    ctx.globalAlpha = 1.0;
    
    // Framing / Corners
    const cl = 25; // corner length
    ctx.lineWidth = 2;
    ctx.strokeStyle = "#ffffff";
    const corners = [
        [pad-10, pad-10, 1, 1],
        [pad+iw+10, pad-10, -1, 1],
        [pad-10, pad+ih+10, 1, -1],
        [pad+iw+10, pad+ih+10, -1, -1]
    ];
    
    corners.forEach(([cx, cy, dx, dy]) => {
        ctx.beginPath();
        ctx.moveTo(cx + dx * cl, cy);
        ctx.lineTo(cx, cy);
        ctx.lineTo(cx, cy + dy * cl);
        ctx.stroke();
    });
    
    // Target Box simulation (like an AI identified an object)
    if (scanProg > 30) {
        ctx.strokeStyle = "#ff0055";
        ctx.lineWidth = 1.5;
        ctx.setLineDash([4, 4]);
        const boxX = pad + iw * 0.15;
        const boxY = pad + ih * 0.15;
        const boxW = iw * 0.7;
        const boxH = ih * 0.7;
        if (scanY > boxY) {
            const h = Math.min(boxH, scanY - boxY);
            ctx.strokeRect(boxX, boxY, boxW, h);
            ctx.fillStyle = "#ff0055";
            ctx.font = "11px Courier New, monospace";
            ctx.fillText("SHAPE_IDENTIFIER_MATRIX", boxX, boxY - 5);
        }
        ctx.setLineDash([]);
    }

    // HUD Text
    ctx.font = "bold 16px Courier New, monospace";
    ctx.fillStyle = themeColor;
    
    ctx.fillText("WEBSITE ICON SEARCH TOPIC IDENTIFIER", pad - 10, 30);
    ctx.fillText(scanProg < 100 ? "STATUS: SCANNING..." : "STATUS: SCAN COMPLETE", pad - 10, 55);
    
    ctx.fillStyle = "#ffffff";
    ctx.font = "12px Courier New, monospace";
    ctx.fillText(`ORIGINAL RES: ${stats.width}x${stats.height}px`, pad + iw - 190, 30);
    ctx.fillText(`ASPECT RATIO: ${stats.ratio}`, pad + iw - 190, 50);
    
    // Bottom HUD
    ctx.fillStyle = themeColor;
    ctx.font = "bold 14px Courier New, monospace";
    ctx.fillText(`PROGRESS: [${scanProg.toFixed(1)}%]`, pad - 10, pad + ih + 35);
    
    // Topic identification deterministic result
    const hashData = stats.width + stats.height + (originalImg.src ? originalImg.src.length : 0);
    const mockTopics = [
        "TECHNOLOGY / SOFTWARE", 
        "E-COMMERCE / RETAIL", 
        "CREATIVE PORTFOLIO", 
        "BLOG / PERSONAL", 
        "CORPORATE / BUSINESS", 
        "ENTERTAINMENT / MEDIA", 
        "NEWS / MAGAZINE", 
        "SOCIAL NETWORK"
    ];
    const topic = mockTopics[hashData % mockTopics.length];
    
    ctx.fillStyle = scanProg > 80 ? "#00ff55" : "#ffaa00";
    ctx.fillText(`IDENTIFIED TOPIC: ${scanProg > 80 ? topic : 'CALCULATING...'}`, pad + 180, pad + ih + 35);
    
    // Decorative lines
    ctx.strokeStyle = themeColor;
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(pad - 10, 70);
    ctx.lineTo(pad + iw + 10, 70);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(pad - 10, pad + ih + 15);
    ctx.lineTo(pad + iw + 10, pad + ih + 15);
    ctx.stroke();
    
    return canvas;
}