YouTube Image Downloader

async function processImage(originalImg, youtubeUrl = "https://www.youtube.com/watch?v=dQw4w9WgXcQ") {
    // Helper function to extract 11-character video ID from varied YouTube URL formats
    function getVideoId(url) {
        if (!url) return "dQw4w9WgXcQ";
        const regex = /(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=|shorts\/|live\/))([^"&?\/\s]{11})/i;
        const match = url.match(regex);
        if (match && match[1]) return match[1];
        if (url.trim().length === 11) return url.trim();
        return "dQw4w9WgXcQ"; // Fallback to a default video ID if extraction fails
    }

    const videoId = getVideoId(youtubeUrl);
    // YouTube's sequential list of thumbnail qualities from highest to lowest
    const qualities = ['maxresdefault', 'sddefault', 'hqdefault', 'mqdefault', 'default'];
    
    // Asynchronously loads an image and checks to ensure valid resolution
    const fetchImage = (url, useCORS) => {
        return new Promise((resolve) => {
            const img = new Image();
            if (useCORS) {
                img.crossOrigin = "Anonymous";
            }
            img.onload = () => {
                // Determine if YouTube sent a placeholder error thumbnail (usually 120x90).
                // They sometimes send a small generic bounding box instead of a 404 for high-res images.
                if ((url.includes('maxresdefault') || url.includes('sddefault')) && img.width <= 120) {
                    resolve(null);
                } else {
                    resolve(img);
                }
            };
            img.onerror = () => resolve(null);
            img.src = url;
        });
    };

    let resultImg = null;

    // First attempt: try fetching image with CORS enabled so canvas download functionalities won't fail
    for (let q of qualities) {
        const url = `https://img.youtube.com/vi/${videoId}/${q}.jpg`;
        resultImg = await fetchImage(url, true);
        if (resultImg) break;
    }

    // Second attempt: if all CORS attempts stringently fail, fallback to drawing the image without CORS.
    // The canvas will become tainted, but it will physically visualize inside the container.
    if (!resultImg) {
        for (let q of qualities) {
            const url = `https://img.youtube.com/vi/${videoId}/${q}.jpg`;
            resultImg = await fetchImage(url, false);
            if (resultImg) break;
        }
    }

    // Create a new canvas structure to fulfill the returned output
    const canvas = document.createElement('canvas');
    if (resultImg && resultImg.width > 0) {
        canvas.width = resultImg.width;
        canvas.height = resultImg.height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(resultImg, 0, 0, canvas.width, canvas.height);
    } else {
        // Ultimate fallback if thumbnail absolutely cannot be fetched
        canvas.width = 640;
        canvas.height = 360;
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = "#111";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "#fff";
        ctx.font = "20px Arial";
        ctx.textAlign = "center";
        ctx.fillText("Failed to retrieve thumbnail.", canvas.width / 2, canvas.height / 2);
    }

    return canvas;
}