Image 10-Stop ND Filter Effect Tool

async function processImage(originalImg) {
    // Internal helper function to ensure the image is loaded and has valid dimensions
    function _ensureImageLoaded(img) {
        return new Promise((resolve, reject) => {
            if (img.complete) { // Check if loading is already complete
                if (img.naturalWidth !== undefined && img.naturalWidth !== 0) {
                    // Image is loaded and has valid dimensions
                    resolve();
                } else {
                    // Image is 'complete' but has no valid dimensions (e.g., broken image, or SVG without intrinsic size)
                    reject(new Error("Image is 'complete' but has invalid dimensions."));
                }
            } else {
                // Image is not yet loaded, or loading is in progress
                img.onload = () => {
                    if (img.naturalWidth !== undefined && img.naturalWidth !== 0) {
                        resolve();
                    } else {
                        reject(new Error("Image loaded successfully but has invalid dimensions."));
                    }
                };
                img.onerror = () => {
                    // Error during image loading (e.g., network issue, invalid image format)
                    reject(new Error("Image failed to load (onerror event)."));
                };
                // Note: This assumes originalImg.src is already set or will be set.
                // If src is never set and image is not 'complete', this promise won't resolve/reject.
            }
        });
    }

    try {
        // Wait for the image to be fully loaded and validated
        await _ensureImageLoaded(originalImg);
    } catch (error) {
        console.error("Error with original image:", error.message);
        // Create a canvas to display the error message
        const errorCanvas = document.createElement('canvas');
        errorCanvas.width = 250; // A default size for the error message canvas
        errorCanvas.height = 150;
        const ctx = errorCanvas.getContext('2d');
        if (ctx) {
            ctx.fillStyle = 'rgb(255, 224, 224)'; // Light red background for error
            ctx.fillRect(0, 0, errorCanvas.width, errorCanvas.height);
            ctx.fillStyle = 'rgb(180, 0, 0)';   // Dark red text
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.font = '14px sans-serif';       // Standard, widely available font

            const errorMessage = error.message || "Unknown image error";
            // Simple text wrapping for the error message
            const maxCharsPerLine = 28;
            const lines = [];
            for (let i = 0; i < errorMessage.length; i += maxCharsPerLine) {
                lines.push(errorMessage.substring(i, i + maxCharsPerLine));
            }
            if (lines.length === 0) lines.push("Image error"); // Default if message was empty

            lines.forEach((line, i) => {
                ctx.fillText(line, errorCanvas.width / 2, (errorCanvas.height / (lines.length + 1)) * (i + 1));
            });
        }
        return errorCanvas; // Return the canvas displaying the error
    }

    // Create the primary canvas for image processing
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    if (!ctx) {
        // This can happen if canvas dimensions are excessively large or not supported by the browser
        console.error("Could not get 2D context from canvas.");
        // Return a canvas indicating this specific error
        const noContextCanvas = document.createElement('canvas');
        noContextCanvas.width = originalImg.naturalWidth || 200; // Use original dimensions or a default
        noContextCanvas.height = originalImg.naturalHeight || 100;
        const fallbackCtx = noContextCanvas.getContext('2d');
        if (fallbackCtx) {
            fallbackCtx.fillStyle = 'rgb(224, 224, 255)'; // Light blue background
            fallbackCtx.fillRect(0, 0, noContextCanvas.width, noContextCanvas.height);
            fallbackCtx.fillStyle = 'rgb(0, 0, 180)';   // Dark blue text
            fallbackCtx.textAlign = 'center';
            fallbackCtx.textBaseline = 'middle';
            fallbackCtx.font = '14px sans-serif';
            fallbackCtx.fillText("Canvas Context Error", noContextCanvas.width / 2, noContextCanvas.height / 2);
        }
        return noContextCanvas;
    }

    // Set canvas dimensions. Browsers may clamp these if they are too large.
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Use the actual dimensions of the canvas, which might have been clamped by the browser.
    const actualCanvasWidth = canvas.width;
    const actualCanvasHeight = canvas.height;
    
    if (actualCanvasWidth === 0 || actualCanvasHeight === 0) {
        console.error("Canvas dimensions are zero after setting. Cannot process image.");
        // This could happen if original image dimensions were 0 and not caught, or browser clamping resulted in 0.
        return canvas; // Return the 0x0 canvas
    }

    // Parameters for the "10-stop ND Filter Effect"
    // Blur: Calculated as a fraction of the image's smaller dimension for consistent visual effect
    // A 0.6% blur provides a noticeable smoothing effect typical of long exposures.
    const blurFractionOfMinDimension = 0.006; 
    const minDimension = Math.min(actualCanvasWidth, actualCanvasHeight);
    // Ensure blurPx is at least 1, even for very small images or if minDimension is 0.
    const blurPx = Math.max(1, Math.round(minDimension * blurFractionOfMinDimension));

    const saturationPercent = 80;  // Slight desaturation (to 80%)
    const brightnessPercent = 105; // Slight increase in brightness (to 105%) for an "airy" feel
    const contrastPercent = 95;    // Slight decrease in contrast (to 95%) for softness

    // Construct the CSS filter string. The order of filters can influence the final look.
    const filterString = `blur(${blurPx}px) saturate(${saturationPercent}%) brightness(${brightnessPercent}%) contrast(${contrastPercent}%)`;

    // Apply the combined filter to the canvas context.
    // This affects all subsequent drawing operations on this context.
    ctx.filter = filterString;

    // Draw the original image onto the canvas.
    // The filter is applied as the image is drawn.
    // If actualCanvasWidth/Height were clamped smaller than originalImg dimensions,
    // this drawImage call effectively scales the image down to fit the canvas.
    ctx.drawImage(originalImg, 0, 0, actualCanvasWidth, actualCanvasHeight);

    // It's good practice to reset the context's filter property if the context
    // might be used for further drawing operations that shouldn't be filtered.
    ctx.filter = 'none';

    // Return the processed canvas
    return canvas;
}