Video First Frame Extractor And Image Resizer

async function processImage(originalImg, maxWidth = 800, maxHeight = 600) {
    return new Promise((resolve, reject) => {
        // Parse the max constraints, falling back to defaults if invalid
        const maxW = Number(maxWidth) || 800;
        const maxH = Number(maxHeight) || 600;

        // Helper function to calculate dimensions, draw to canvas, and return it
        const extractAndResize = (sourceElement, originalWidth, originalHeight) => {
            // Calculate scale to ensure the image scales down to fit within max constraints
            let scale = Math.min(maxW / originalWidth, maxH / originalHeight);
            
            // Only scale down (per requirement: "scales that image down")
            if (scale > 1) {
                scale = 1; 
            }

            const targetW = Math.round(originalWidth * scale);
            const targetH = Math.round(originalHeight * scale);

            const canvas = document.createElement('canvas');
            canvas.width = targetW;
            canvas.height = targetH;
            
            const ctx = canvas.getContext('2d');
            ctx.drawImage(sourceElement, 0, 0, targetW, targetH);
            
            return canvas;
        };

        // If the system wraps video files in an Image object, we can extract the src 
        // to load it back into a proper HTMLVideoElement to grab the frame.
        const video = document.createElement('video');
        video.crossOrigin = 'anonymous';
        video.muted = true;
        video.setAttribute('playsinline', '');

        video.addEventListener('seeked', () => {
            try {
                const w = video.videoWidth;
                const h = video.videoHeight;
                if (!w || !h) throw new Error("Invalid video dimensions");
                
                const canvas = extractAndResize(video, w, h);
                resolve(canvas);
            } catch (e) {
                fallbackToImage();
            }
        });

        video.addEventListener('loadeddata', () => {
            // Setting currentTime triggers a seeked event. 
            // Using 0.001 avoids browser quirks where 0th frame might be black or ignored.
            video.currentTime = 0.001; 
        });

        video.addEventListener('error', () => {
            // If it fails to load as a video (e.g. wrong format, or it's actually an image),
            // fallback to treating the provided originalImg itself as the target.
            fallbackToImage();
        });

        function fallbackToImage() {
            try {
                const w = originalImg.naturalWidth || originalImg.width || 800;
                const h = originalImg.naturalHeight || originalImg.height || 600;
                const canvas = extractAndResize(originalImg, w, h);
                resolve(canvas);
            } catch (e) {
                reject(new Error("Unable to extract frame or read image source."));
            }
        }

        // Apply string source to the video element to try processing it as a video
        video.src = originalImg.src;
        video.load();
    });
}