Website Image Scanner Tool

function processImage(originalImg, themeColor = '#00ffcc', scanSpeed = 3) {
    // Determine the width, height, and safe basic metrics
    const width = originalImg.width || 1;
    const height = originalImg.height || 1;
    const pixels = width * height;
    
    // Create main wrapper container
    const wrapper = document.createElement('div');
    wrapper.style.display = 'flex';
    wrapper.style.flexDirection = 'column';
    wrapper.style.fontFamily = '"Courier New", Courier, monospace';
    wrapper.style.maxWidth = '100%';
    wrapper.style.width = 'fit-content';
    wrapper.style.backgroundColor = '#111';
    wrapper.style.border = `2px solid ${themeColor}`;
    wrapper.style.boxShadow = `0 4px 15px rgba(0,0,0,0.5)`;
    wrapper.style.borderRadius = '8px';
    wrapper.style.overflow = 'hidden';

    // Top Image Area (Displays image, scanner visual, and grid overlay)
    const imgContainer = document.createElement('div');
    imgContainer.style.position = 'relative';
    imgContainer.style.display = 'flex';
    imgContainer.style.justifyContent = 'center';
    imgContainer.style.alignItems = 'center';
    imgContainer.style.overflow = 'hidden';
    imgContainer.style.backgroundColor = '#000';
    imgContainer.style.borderBottom = `2px solid ${themeColor}`;
    
    // Canvas to process/display image
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    canvas.style.maxWidth = '100%';
    canvas.style.maxHeight = '60vh'; 
    canvas.style.objectFit = 'contain';
    canvas.style.display = 'block';

    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);
    imgContainer.appendChild(canvas);

    // CSS Grid Background Overlay to look techy/scanned
    const gridOverlay = document.createElement('div');
    gridOverlay.style.position = 'absolute';
    gridOverlay.style.top = '0';
    gridOverlay.style.left = '0';
    gridOverlay.style.width = '100%';
    gridOverlay.style.height = '100%';
    gridOverlay.style.backgroundImage = `
        linear-gradient(${themeColor} 1px, transparent 1px),
        linear-gradient(90deg, ${themeColor} 1px, transparent 1px)
    `;
    gridOverlay.style.backgroundSize = '30px 30px';
    gridOverlay.style.opacity = '0.15';
    gridOverlay.style.pointerEvents = 'none';
    imgContainer.appendChild(gridOverlay);

    // Animated Scanner line
    const scannerLine = document.createElement('div');
    scannerLine.style.position = 'absolute';
    scannerLine.style.left = '0';
    scannerLine.style.width = '100%';
    scannerLine.style.height = '3px';
    scannerLine.style.backgroundColor = themeColor;
    scannerLine.style.boxShadow = `0 0 15px 5px ${themeColor}`;
    scannerLine.style.zIndex = '10';
    scannerLine.style.opacity = '0.9';

    // Unique style per invocation to prevent keyframe conflict
    const styleId = 'scanner-css-' + Math.random().toString(36).substr(2, 9);
    const style = document.createElement('style');
    style.textContent = `
        @keyframes scanEffect-${styleId} {
            0% { top: 0%; opacity: 0; }
            5% { opacity: 1; }
            95% { opacity: 1; }
            100% { top: 100%; opacity: 0; }
        }
        .scan-line-${styleId} {
            animation: scanEffect-${styleId} ${scanSpeed}s infinite cubic-bezier(0.4, 0, 0.2, 1);
        }
    `;
    wrapper.appendChild(style);
    scannerLine.className = `scan-line-${styleId}`;
    imgContainer.appendChild(scannerLine);
    wrapper.appendChild(imgContainer);

    // ======== WEBSITE SCANNER ANALYSIS LOGIC ======== //

    // Estimate file size through encoding payload (Wrapping in try..catch for CORS constraints)
    let estSizeKb = 0;
    try { 
        const dataUrl = canvas.toDataURL('image/jpeg', 0.8);
        estSizeKb = Math.round(((dataUrl.length - 22) * 3 / 4) / 1024);
    } catch(e) {
        estSizeKb = null;
    }

    // Collect optimization findings suitable for building websites
    let status = "OPTIMAL FOR WEB";
    let statusColor = themeColor; 
    
    const issues = [];
    if (width > 1920) issues.push("Warning: Width exceeds 1920px (Larger than standard 1080p web layouts require).");
    if (estSizeKb && estSizeKb > 500) issues.push("Warning: Estimated file compression size > 500KB. Too heavy.");
    if (estSizeKb && estSizeKb > 2000) issues.push("Critical: Estimated size > 2MB. Severe website performance load time impact.");
    
    if (issues.length > 0) {
        status = issues.some(i => i.includes('Critical')) ? "CRITICAL ISSUES" : "NEEDS OPTIMIZATION";
        statusColor = issues.some(i => i.includes('Critical')) ? '#ff4444' : '#ffcc00';
    }

    // Grab dominant / average color base
    let r = 0, g = 0, b = 0, count = 0;
    try {
        const imageData = ctx.getImageData(0, 0, width, height);
        const data = imageData.data;
        const step = Math.max(1, Math.floor(pixels / 2000)); // Sample ~2k px to avoid UI freeze
        for (let i = 0; i < data.length; i += 4 * step) {
            r += data[i];
            g += data[i+1];
            b += data[i+2];
            count++;
        }
        r = count > 0 ? Math.floor(r / count) : 0;
        g = count > 0 ? Math.floor(g / count) : 0;
        b = count > 0 ? Math.floor(b / count) : 0;
    } catch(e) {}
    
    const hexColor = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();

    // Data parsing
    const aspectRatio = height ? (width / height) : 1;
    const aspectStr = aspectRatio >= 1 ? `${aspectRatio.toFixed(2)}:1` : `1:${(1/aspectRatio).toFixed(2)}`;
    
    let formatStr = 'UNKNOWN';
    if (originalImg.src && originalImg.src.startsWith('data:image/')) {
        const mime = originalImg.src.split(';')[0].split('/')[1];
        formatStr = mime ? mime.toUpperCase() : 'UNKNOWN';
    }

    // Bottom Data Output Panel
    const infoPanel = document.createElement('div');
    infoPanel.style.padding = '20px';
    infoPanel.style.color = '#fff';
    infoPanel.style.backgroundColor = '#1a1a1a';

    const issuesHTML = issues.length 
        ? `<div style="margin-top: 15px; padding-top: 15px; border-top: 1px dashed #444;">
             ${issues.map(i => `<div style="color:${i.includes('Critical') ? '#ff4444' : '#ffcc00'}; font-size:13px; margin-bottom:5px;">⚠️ ${i}</div>`).join('')}
           </div>`
        : `<div style="margin-top: 15px; padding-top: 15px; border-top: 1px dashed #444; color: #00ffcc; font-size:13px;">
             ✔️ Image is well optimized and ready for web environments.
           </div>`;

    infoPanel.innerHTML = `
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; flex-wrap: wrap; gap: 10px;">
            <div style="font-weight:bold; color:${themeColor}; font-size:18px; letter-spacing: 1px;">
               🌐 WEBSITE FILE SCANNER LOG
            </div>
            <div style="padding: 4px 10px; background: rgba(0,0,0,0.5); border: 1px solid ${statusColor}; color: ${statusColor}; border-radius: 4px; font-size: 13px; font-weight: bold;">
                ${status}
            </div>
        </div>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; font-size: 14px;">
            <div><span style="color: #888;">Dimensions:</span> <span style="font-weight:bold; float:right;">${width}x${height} px</span></div>
            <div><span style="color: #888;">Aspect Ratio:</span> <span style="font-weight:bold; float:right;">${aspectStr}</span></div>
            <div><span style="color: #888;">Expected Format:</span> <span style="font-weight:bold; float:right;">${formatStr}</span></div>
            <div>
                 <span style="color: #888;">Avg Color:</span> 
                 <span style="font-weight:bold; float:right;">
                    <span style="display:inline-block; width:12px; height:12px; background-color:${hexColor}; vertical-align:middle; border:1px solid #777; margin-right:4px;"></span>${hexColor}
                 </span>
            </div>
            <div><span style="color: #888;">Total Pixels:</span> <span style="font-weight:bold; float:right;">${pixels.toLocaleString()}</span></div>
            <div><span style="color: #888;">Web Est. Size:</span> <span style="font-weight:bold; float:right;">${estSizeKb ? estSizeKb + ' KB' : 'N/A CORS'}</span></div>
        </div>
        ${issuesHTML}
    `;

    wrapper.appendChild(infoPanel);

    return wrapper;
}