Image Deardorff Large Format Filter Effect Application

function processImage(originalImg, sepiaAmount = 0.6, saturationValue = 0.8, contrastValue = 1.1, blurRadius = 1, vignetteStrength = 0.7, vignetteStartRatio = 0.3, vignetteEndRatio = 0.9) {

    // Sanitize and convert parameters:
    // Ensure they are numbers and fall within reasonable/expected ranges.
    // parseFloat(String(param)) handles both string and number inputs.
    // The '|| 0' provides a default if parsing fails (e.g., non-numeric string).
    const numSepiaAmount = Math.max(0, Math.min(1, parseFloat(String(sepiaAmount)) || 0));
    const numSaturationValue = Math.max(0, parseFloat(String(saturationValue)) || 0); // No upper bound, but typically 0-2
    const numContrastValue = Math.max(0, parseFloat(String(contrastValue)) || 0);   // No upper bound, but typically 0-2
    const numBlurRadius = Math.max(0, parseFloat(String(blurRadius)) || 0);
    const numVignetteStrength = Math.max(0, Math.min(1, parseFloat(String(vignetteStrength)) || 0));
    const numVignetteStartRatio = Math.max(0, Math.min(1, parseFloat(String(vignetteStartRatio)) || 0));
    const numVignetteEndRatio = Math.max(0, Math.min(1, parseFloat(String(vignetteEndRatio)) || 0));

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    // Handle cases where the image might not have loaded or has invalid dimensions
    if (imgWidth <= 0 || imgHeight <= 0) {
        // Return a minimal 1x1 canvas if image dimensions are invalid
        canvas.width = 1;
        canvas.height = 1;
        // console.warn("Original image has invalid dimensions or failed to load."); // Optional warning
        return canvas;
    }

    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // 1. Apply base image filters (sepia, saturation, contrast, blur)
    // Construct the filter string by joining individual filter functions.
    const filters = [];
    if (numSepiaAmount > 0) { // sepia(0) is no effect
        filters.push(`sepia(${numSepiaAmount})`);
    }
    if (numSaturationValue !== 1) { // saturate(1) is no effect
        filters.push(`saturate(${numSaturationValue})`);
    }
    if (numContrastValue !== 1) { // contrast(1) is no effect
        filters.push(`contrast(${numContrastValue})`);
    }
    if (numBlurRadius > 0) { // blur(0px) is no effect
        filters.push(`blur(${numBlurRadius}px)`);
    }
    
    if (filters.length > 0) {
        ctx.filter = filters.join(' ');
    }

    // Draw the original image onto the canvas.
    // If filters were set, they are applied during this drawImage operation.
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // Reset the filter property to 'none' to ensure subsequent drawing operations
    // (like the vignette) are not affected by the previously set filters.
    ctx.filter = 'none';

    // 2. Apply Vignette
    // The vignette is applied only if its strength is positive and
    // the end ratio is greater than the start ratio, forming a valid gradient range.
    if (numVignetteStrength > 0 && numVignetteEndRatio > numVignetteStartRatio) {
        const centerX = imgWidth / 2;
        const centerY = imgHeight / 2;

        // Calculate the maximum radius for the gradient; typically the distance to a corner.
        // This ensures the vignette gradient can cover the entire image.
        const maxRadius = Math.sqrt(centerX * centerX + centerY * centerY);

        // r0 is the radius of the inner circle of the gradient (where the vignette effect starts).
        // It's scaled by numVignetteStartRatio relative to maxRadius.
        const r0 = maxRadius * numVignetteStartRatio;
        // r1 is the radius of the outer circle of the gradient (where vignette reaches full strength).
        // It's scaled by numVignetteEndRatio relative to maxRadius.
        const r1 = maxRadius * numVignetteEndRatio;
        
        // Create the radial gradient.
        const gradient = ctx.createRadialGradient(centerX, centerY, r0, centerX, centerY, r1);

        // Define color stops for the gradient:
        // Stop 0: At the inner radius (r0), the color is transparent black.
        gradient.addColorStop(0, 'rgba(0,0,0,0)');
        // Stop 1: At the outer radius (r1), the color is semi-transparent black,
        // with alpha controlled by numVignetteStrength.
        gradient.addColorStop(1, `rgba(0,0,0,${numVignetteStrength})`);

        // Apply the gradient as a fill style.
        ctx.fillStyle = gradient;
        
        // Fill the entire canvas with the gradient.
        // - Areas inside r0 (before the first stop) will take the color of the first stop (transparent).
        // - Areas between r0 and r1 will render the gradient transition.
        // - Areas outside r1 (after the last stop) will take the color of the last stop (`rgba(0,0,0,${numVignetteStrength})`).
        ctx.fillRect(0, 0, imgWidth, imgHeight);
    }

    return canvas;
}