YouTube Image Identifier Tool

function processImage(originalImg, overlayColor = "red", playButtonOpacity = "0.9", showOverlayPreview = "yes") {
    // Create a container div for the result
    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.textAlign = 'center';

    // Image Identification Metrics
    const width = originalImg.width;
    const height = originalImg.height;
    const aspectRatio = (width / height).toFixed(2);
    const is16by9 = Math.abs((width / height) - (16 / 9)) < 0.05;
    const isRecommendedSize = width === 1280 && height === 720;
    const isMinimumSize = width >= 640 && height >= 360;

    // Try to extract YouTube ID from the image source URL if dragged directly from YouTube
    let youtubeId = "N/A";
    try {
        const url = new URL(originalImg.src);
        const pathTokens = url.pathname.split('/');
        const viIndex = pathTokens.indexOf('vi');
        if (viIndex !== -1 && pathTokens.length > viIndex + 1) {
            youtubeId = pathTokens[viIndex + 1];
        }
    } catch (e) {
        // Source is not a valid URL or is a blob/data URI without a pathname
    }

    // Build the Information Panel
    const infoPanel = document.createElement('div');
    infoPanel.style.marginTop = '10px';
    infoPanel.style.padding = '20px';
    infoPanel.style.backgroundColor = '#f9f9f9';
    infoPanel.style.border = '1px solid #ddd';
    infoPanel.style.borderRadius = '8px';
    infoPanel.style.display = 'inline-block';
    infoPanel.style.textAlign = 'left';
    infoPanel.style.boxShadow = '0 4px 6px rgba(0,0,0,0.05)';

    infoPanel.innerHTML = `
        <h3 style="margin-top: 0; color: #333; border-bottom: 2px solid #ccc; padding-bottom: 10px;">YouTube Image Identifier</h3>
        <p style="margin: 8px 0;"><strong>Dimensions:</strong> ${width} x ${height} px</p>
        <p style="margin: 8px 0;"><strong>Aspect Ratio:</strong> ${aspectRatio}:1 (Ideal: 1.78:1)</p>
        <p style="margin: 8px 0;"><strong>Resolution Status:</strong> ${isRecommendedSize ? '<span style="color: #2e7d32; font-weight: bold;">Optimal (1280x720)</span>' : (isMinimumSize ? '<span style="color: #f57c00; font-weight: bold;">Acceptable (Minimum 640x360)</span>' : '<span style="color: #d32f2f; font-weight: bold;">Too Small or Unconventional</span>')}</p>
        <p style="margin: 8px 0;"><strong>Aspect Ratio Status:</strong> ${is16by9 ? '<span style="color: #2e7d32; font-weight: bold;">Valid 16:9</span>' : '<span style="color: #d32f2f; font-weight: bold;">Not 16:9 (Will display with black bars)</span>'}</p>
        ${youtubeId !== "N/A" ? `<p style="margin: 8px 0;"><strong>Extracted YouTube Video ID:</strong> <a href="https://youtu.be/${youtubeId}" target="_blank" style="color: #1976d2; text-decoration: none;">${youtubeId}</a></p>` : ''}
    `;
    container.appendChild(infoPanel);

    // Render Canvas Overlay Preview
    if (showOverlayPreview.toLowerCase() === "yes" || showOverlayPreview === "1") {
        container.appendChild(document.createElement('br'));
        
        const previewHeader = document.createElement('h4');
        previewHeader.innerText = "Thumbnail Preview Simulation";
        previewHeader.style.color = "#555";
        previewHeader.style.marginTop = "25px";
        container.appendChild(previewHeader);

        const canvas = document.createElement('canvas');
        canvas.width = originalImg.width;
        canvas.height = originalImg.height;
        canvas.style.maxWidth = '100%';
        canvas.style.height = 'auto';
        canvas.style.backgroundColor = '#000'; // To visualize black bars if manipulated
        canvas.style.boxShadow = '0 6px 12px rgba(0,0,0,0.15)';
        
        const ctx = canvas.getContext('2d');
        
        // Draw the original image
        ctx.drawImage(originalImg, 0, 0);

        // Calculate dimensions for the YouTube play button overlay
        const buttonWidth = Math.max(originalImg.width * 0.15, 68);
        const buttonHeight = buttonWidth / 1.43; // Standard YouTube button aspect ratio
        const centerX = originalImg.width / 2;
        const centerY = originalImg.height / 2;

        const radius = buttonHeight * 0.2;
        const x = centerX - buttonWidth / 2;
        const y = centerY - buttonHeight / 2;

        // Draw rounded rectangle background
        ctx.globalAlpha = parseFloat(playButtonOpacity) || 0.9;
        ctx.fillStyle = overlayColor;
        ctx.beginPath();
        ctx.moveTo(x + radius, y);
        ctx.lineTo(x + buttonWidth - radius, y);
        ctx.quadraticCurveTo(x + buttonWidth, y, x + buttonWidth, y + radius);
        ctx.lineTo(x + buttonWidth, y + buttonHeight - radius);
        ctx.quadraticCurveTo(x + buttonWidth, y + buttonHeight, x + buttonWidth - radius, y + buttonHeight);
        ctx.lineTo(x + radius, y + buttonHeight);
        ctx.quadraticCurveTo(x, y + buttonHeight, x, y + buttonHeight - radius);
        ctx.lineTo(x, y + radius);
        ctx.quadraticCurveTo(x, y, x + radius, y);
        ctx.fill();

        // Overlay Triangle
        ctx.globalAlpha = 1.0;
        const triangleW = buttonWidth * 0.35;
        const triangleH = buttonHeight * 0.55;
        const triX = centerX - triangleW * 0.25; // Visually centering the triangle
        const triY = centerY;

        ctx.fillStyle = '#ffffff';
        ctx.beginPath();
        ctx.moveTo(triX, triY - triangleH / 2);
        ctx.lineTo(triX + triangleW, triY);
        ctx.lineTo(triX, triY + triangleH / 2);
        ctx.fill();

        container.appendChild(canvas);
    }

    return container;
}