Image Forest Mist Filter Effect Tool

function processImage(originalImg, mistColorHex = "AACCBB", mistStrength = 0.3, desaturationAmount = 0.6, brightnessAmount = 1.1) {
    // Validate and sanitize mistColorHex parameter
    let finalMistColorHex = String(mistColorHex).toUpperCase().replace(/^#/, '');
    if (!/^[0-9A-F]{6}$/.test(finalMistColorHex)) {
        finalMistColorHex = "AACCBB"; // Default to a light cyan-green if invalid
    }

    // Validate and clamp mistStrength (0.0 to 1.0)
    mistStrength = Number(mistStrength);
    mistStrength = Math.max(0, Math.min(1, mistStrength));

    // Validate and clamp desaturationAmount (0.0 to 1.0)
    // 0 means original saturation, 1 means fully desaturated (grayscale)
    desaturationAmount = Number(desaturationAmount);
    desaturationAmount = Math.max(0, Math.min(1, desaturationAmount));

    // Validate and clamp brightnessAmount (0.0 upwards)
    // 1 means original brightness. <1 is darker, >1 is brighter. 0 is black.
    brightnessAmount = Number(brightnessAmount);
    brightnessAmount = Math.max(0, brightnessAmount); 

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

    // Set canvas dimensions to the original image's dimensions
    // Use naturalWidth/Height if available (for <img> elements), fallback to width/height
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

    // If image dimensions are zero, return an empty canvas (or handle as error)
    if (canvas.width === 0 || canvas.height === 0) {
        console.warn("Image has zero dimensions.");
        return canvas; // Return empty canvas
    }

    // 1. Apply base image filters: desaturation and brightness
    // The `saturate` filter value is 1 for original, 0 for grayscale.
    const saturateValue = 1 - desaturationAmount;
    // The `brightness` filter value is 1 for original.
    ctx.filter = `saturate(${saturateValue}) brightness(${brightnessAmount})`;
    
    // Draw the original image onto the canvas, applying the filter
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // Reset filter for subsequent operations
    ctx.filter = 'none';

    // 2. Apply mist color tint if mistStrength is greater than 0
    if (mistStrength > 0) {
        // Parse the hex color string to RGB components
        const r = parseInt(finalMistColorHex.substring(0, 2), 16);
        const g = parseInt(finalMistColorHex.substring(2, 4), 16);
        const b = parseInt(finalMistColorHex.substring(4, 6), 16);

        // If parsing somehow failed (though regex should prevent this), skip tinting
        if (isNaN(r) || isNaN(g) || isNaN(b)) {
            console.warn("Invalid mistColorHex resulted in NaN RGB values.");
        } else {
            // Use 'source-atop' to apply the color only where the image content exists.
            // The mist color is blended with the existing pixels.
            // mistStrength controls the alpha of the fillStyle, determining tint intensity.
            ctx.globalCompositeOperation = 'source-atop';
            ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${mistStrength})`;
            
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // Reset composite operation to default
            ctx.globalCompositeOperation = 'source-over';
        }
    }

    return canvas;
}