Image Double Exposure Blend Filter

async function processImage(originalImg, overlaySourceUrl = "USE_PICSUM_AS_DEFAULT", blendMode = "lighten", overlayOpacity = 0.7) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Determine dimensions from the original image (works for HTMLImageElement and HTMLCanvasElement)
    const canvasWidth = originalImg.naturalWidth || originalImg.width;
    const canvasHeight = originalImg.naturalHeight || originalImg.height;

    // Handle cases where original image dimensions might be invalid (e.g., image not loaded yet or 0x0 image)
    if (canvasWidth === 0 || canvasHeight === 0) {
        console.warn("Original image has zero width or height. Cannot process. Returning an empty canvas.");
        // Set canvas dimensions to 0x0 to reflect no content can be processed.
        canvas.width = 0; 
        canvas.height = 0;
        return canvas;
    }
    
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;

    // 1. Draw the base image (originalImg) onto the canvas
    ctx.drawImage(originalImg, 0, 0, canvasWidth, canvasHeight);

    // Determine the actual URL for the overlay image based on overlaySourceUrl parameter
    let finalOverlayUrl = overlaySourceUrl;
    if (overlaySourceUrl === "USE_PICSUM_AS_DEFAULT") {
        // Use a dynamic URL from Picsum Photos as a default overlay source
        // The 'seed' part helps in getting a consistent "random" image for the same dimensions
        finalOverlayUrl = `https://picsum.photos/seed/double_exposure_fx/${canvasWidth}/${canvasHeight}`;
        console.info(`Using default Picsum URL for overlay: ${finalOverlayUrl}`);
    } else if (!overlaySourceUrl) { 
        // If user explicitly passes an empty string (or null/undefined which becomes falsey) for the URL
        console.info("No overlay image URL provided (empty string). Displaying original image without double exposure.");
        return canvas; // Return canvas with only the original image drawn
    }

    // Clamp overlayOpacity to the valid range [0, 1]
    const effectiveOpacity = Math.max(0, Math.min(1, overlayOpacity));

    // If effective opacity is 0, the overlay would be fully transparent.
    // No need to load and draw the overlay image in this case.
    if (effectiveOpacity === 0) {
        console.info("Overlay opacity is 0. Skipping overlay application.");
        return canvas; // Return canvas with only the original image drawn
    }

    try {
        // 2. Load the overlay image asynchronously
        const overlayImage = await new Promise((resolve, reject) => {
            const img = new Image();
            // Setting crossOrigin is crucial for loading images from external domains into a canvas securely.
            // The remote server must also send appropriate CORS headers (e.g., Access-Control-Allow-Origin: *).
            // Picsum Photos generally does this.
            img.crossOrigin = "Anonymous"; 
            img.onload = () => resolve(img);
            img.onerror = (err) => {
                // Provide a detailed error message if image loading fails
                console.error(`Error loading overlay image from: ${finalOverlayUrl}. Full error:`, err);
                reject(new Error(`Failed to load overlay image. Please check the URL, network connectivity, and server's CORS policy. URL: ${finalOverlayUrl}`));
            };
            img.src = finalOverlayUrl;
        });
        
        // 3. Apply blending properties to the canvas context
        ctx.globalAlpha = effectiveOpacity; // Set the transparency of the overlay
        
        // Set the composite (blend) mode.
        // List of common valid W3C/WHATWG globalCompositeOperation values:
        // "source-over", "source-in", "source-out", "source-atop", 
        // "destination-over", "destination-in", "destination-out", "destination-atop",
        // "lighter", "copy", "xor", "multiply", "screen", "overlay", "darken", 
        // "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", 
        // "difference", "exclusion", "hue", "saturation", "color", "luminosity".
        // If an invalid mode is provided, browser behavior might vary (often defaults to 'source-over').
        ctx.globalCompositeOperation = blendMode;

        // 4. Draw the loaded overlay image onto the canvas
        // This example stretches the overlay image to fit the canvas dimensions.
        // For aspect ratio preservation, more complex logic (e.g., "cover" or "contain") would be needed.
        ctx.drawImage(overlayImage, 0, 0, canvasWidth, canvasHeight);

    } catch (error) {
        // This catch block handles errors primarily from loading or drawing the overlayImage.
        // If an error occurs, the canvas currently contains the originalImage.
        // We log a warning and proceed to return the canvas in its current state (with just originalImg).
        console.warn(`Could not apply the double exposure effect due to an error: ${error.message}. Displaying the base image only.`);
    } finally {
        // 5. Reset canvas context properties to their default states
        // This is important for ensuring that the canvas context is 'clean' if it were to be used further,
        // though for a returned canvas that's immediately used for display, it's less critical but good practice.
        ctx.globalAlpha = 1.0;
        ctx.globalCompositeOperation = 'source-over';
    }

    return canvas;
}