YouTube Video Photo And Image Stats For Nerds Tool

function processImage(originalImg, position = 'top-left') {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    const imgW = originalImg.width;
    const imgH = originalImg.height;
    canvas.width = imgW;
    canvas.height = imgH;

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

    // Helpers to generate random faux-Youtube stats
    const generateId = (len) => Array.from({length: len}, () => (Math.random().toString(36)[2] || 'a')).join('');
    const videoId = generateId(11);
    const scpn = generateId(16).toUpperCase();

    // Data to plot in our "Stats for nerds" box
    const statsData = [
        { label: "Video ID / sCPN", value: `${videoId} / ${scpn}` },
        { label: "Viewport / Frames", value: `${imgW}x${imgH} / 0 dropped` },
        { label: "Current / Optimal", value: `${imgW}x${imgH} / ${imgW}x${imgH}` },
        { label: "Volume / Normal...", value: "100% / 100% (content loudness 0.0dB)" },
        { label: "Codecs", value: "image/jpeg (0) / image/png (0)" },
        { label: "Color", value: "sRGB / bt709" },
        { label: "Host", value: `rr${Math.floor(Math.random() * 5 + 1)}---sn-${generateId(8)}.googlevideo.com` },
        { label: "Connection Speed", value: `${Math.floor(Math.random() * 50000 + 10000)} Kbps` },
        { label: "Network Activity", value: "0 KB" },
        { label: "Buffer Health", value: "0.00 s" },
        { label: "Mystery Text", value: `s:4 t:${(Math.random() * 100).toFixed(2)} b:0.000 P V: none` }
    ];

    // Determine font size based on image width to keep it reasonably scaled
    let fontSize = Math.max(10, Math.min(24, Math.floor(imgW / 35)));
    let padding, boxWidth, boxHeight, lineSpacing;

    // Auto-scale down if text overflows bounds
    while (fontSize >= 6) {
        ctx.font = `${fontSize}px "Roboto Mono", "Courier New", Courier, monospace`;
        let maxTextWidth = 0;
        
        for (const item of statsData) {
            // Pad the label to exactly 18 characters so the colon/values align perfectly in monospace
            const label = item.label.padEnd(18, ' ');
            const width = ctx.measureText(label + item.value).width;
            if (width > maxTextWidth) maxTextWidth = width;
        }
        
        padding = fontSize * 1.5;
        boxWidth = padding * 2 + maxTextWidth;
        lineSpacing = fontSize * 1.6;
        boxHeight = padding * 2 + statsData.length * lineSpacing;
        
        if (boxWidth <= imgW - 10) {
            break; // Fits comfortably within the image width
        }
        fontSize--; // Try a smaller font if it doesn't fit
    }

    // Determine the position coordinates
    let x = 10;
    let y = 10;
    
    if (position === 'center') {
        x = (imgW - boxWidth) / 2;
        y = (imgH - boxHeight) / 2;
    } else if (position === 'top-right') {
        x = imgW - boxWidth - 10;
    } else if (position === 'bottom-left') {
        y = imgH - boxHeight - 10;
    } else if (position === 'bottom-right') {
        x = imgW - boxWidth - 10;
        y = imgH - boxHeight - 10;
    }
    
    // Bounds check to ensure box remains visible
    x = Math.max(0, Math.min(x, imgW - boxWidth));
    y = Math.max(0, Math.min(y, imgH - boxHeight));

    // 1. Draw Overlay Background
    ctx.fillStyle = 'rgba(0, 0, 0, 0.75)';
    ctx.fillRect(x, y, boxWidth, boxHeight);

    // 2. Draw 'X' Close icon in the top right
    const closeX = x + boxWidth - padding;
    const closeY = y + padding;
    const closeSize = fontSize * 0.8;
    
    ctx.beginPath();
    ctx.moveTo(closeX, closeY);
    ctx.lineTo(closeX + closeSize, closeY + closeSize);
    ctx.moveTo(closeX + closeSize, closeY);
    ctx.lineTo(closeX, closeY + closeSize);
    ctx.strokeStyle = '#ffffff';
    ctx.lineWidth = Math.max(1, fontSize * 0.15);
    ctx.stroke();

    // 3. Draw Stats Data Lines
    let currentY = y + padding;
    const textX = x + padding;
    ctx.textBaseline = 'top';

    for (const item of statsData) {
        // Label styling (classic YouTube gray)
        const label = item.label.padEnd(18, ' ');
        ctx.fillStyle = '#aaaaaa';
        ctx.fillText(label, textX, currentY);
        
        // Measure exact label width to append value robustly
        const labelWidth = ctx.measureText(label).width;
        
        // Value styling (White color)
        ctx.fillStyle = '#ffffff';
        ctx.fillText(item.value, textX + labelWidth, currentY);
        
        currentY += lineSpacing;
    }

    return canvas;
}