YouTube Video To Image Extractor

async function processImage(originalImg, youtubeUrl = "https://www.youtube.com/watch?v=dQw4w9WgXcQ") {
    // Helper function to extract YouTube video ID from various link formats (including Shorts)
    function extractVideoId(url) {
        const regex = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?|shorts)\/|.*[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/i;
        const match = url.match(regex);
        return match ? match[1] : null;
    }

    const videoId = extractVideoId(youtubeUrl);

    if (!videoId) {
        // Return a dummy canvas indicating an error if the URL is invalid
        const canvas = document.createElement("canvas");
        canvas.width = 640;
        canvas.height = 360;
        const ctx = canvas.getContext("2d");
        
        ctx.fillStyle = "#1e1e1e";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        ctx.fillStyle = "#ff5555";
        ctx.font = "bold 24px sans-serif";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText("Invalid YouTube URL", canvas.width / 2, canvas.height / 2);
        
        return canvas;
    }

    // YouTube Thumbnail Qualities to attempt (Highest to Lowest)
    // Note: Older or lower-resolution videos might lack maxresdefault or sddefault.
    const qualities = [
        "maxresdefault.jpg", // 1080p / 720p (best)
        "sddefault.jpg",     // 480p
        "hqdefault.jpg",     // 360p (usually guaranteed)
        "mqdefault.jpg",     // 180p
        "default.jpg"        // 90p
    ];

    return new Promise((resolve) => {
        let qualityIndex = 0;

        function fetchThumbnail() {
            if (qualityIndex >= qualities.length) {
                // Return original image as fallback if all YT image sources fail
                resolve(originalImg);
                return;
            }

            const srcUrl = `https://img.youtube.com/vi/${videoId}/${qualities[qualityIndex]}`;
            
            const img = new Image();
            img.crossOrigin = "Anonymous"; // Allows drawing to canvas safely
            
            img.onload = () => {
                // YouTube sometimes returns a 120x90 grey placeholder image when maxres/sd are missing
                if (img.width === 120 && qualityIndex < 2) {
                    qualityIndex++;
                    fetchThumbnail();
                } else {
                    // Wrap the loaded thumbnail in a canvas
                    const canvas = document.createElement("canvas");
                    canvas.width = img.width;
                    canvas.height = img.height;
                    const ctx = canvas.getContext("2d");
                    ctx.drawImage(img, 0, 0);
                    resolve(canvas);
                }
            };

            img.onerror = () => {
                // If blocked by CORS or a 404 error occurs, fallback to no-CORS mode
                const imgNoCors = new Image();
                imgNoCors.onload = () => {
                    if (imgNoCors.width === 120 && qualityIndex < 2) {
                        qualityIndex++;
                        fetchThumbnail();
                    } else {
                        // Can't safely draw to a canvas without crossOrigin tainting, 
                        // so resolve directly with the Image Element.
                        resolve(imgNoCors);
                    }
                };

                imgNoCors.onerror = () => {
                    // Try next quality level
                    qualityIndex++;
                    fetchThumbnail();
                };

                imgNoCors.src = srcUrl;
            };

            img.src = srcUrl;
        }

        fetchThumbnail();
    });
}