Ethereal Photo Filter Tool

function processImage(originalImg, brightnessLevel = 1.2, contrastLevel = 0.8, blurAmount = 1.5, saturationLevel = 0.8, tintColor = "rgba(173, 216, 230, 0.15)", tintBlendMode = "soft-light") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height for actual image dimensions, fallback to width/height.
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

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

    // If image dimensions are zero (e.g., image not loaded or invalid), return an empty canvas.
    if (canvas.width === 0 || canvas.height === 0) {
        console.error("Original image has zero width or height. Ensure the image is loaded before processing.");
        return canvas;
    }

    // 1. Construct the filter string for brightness, contrast, blur, and saturation.
    // The CSS filter property syntax is used here.
    // Example: "brightness(1.2) contrast(0.8) blur(1.5px) saturate(0.8)"
    let filterString = "";
    if (brightnessLevel !== 1) { // Neutral value for brightness is 1
        filterString += `brightness(${brightnessLevel}) `;
    }
    if (contrastLevel !== 1) { // Neutral value for contrast is 1
        filterString += `contrast(${contrastLevel}) `;
    }
    if (blurAmount > 0) { // Neutral value for blur is 0px
        filterString += `blur(${blurAmount}px) `;
    }
    if (saturationLevel !== 1) { // Neutral value for saturation is 1
        filterString += `saturate(${saturationLevel}) `;
    }
    
    filterString = filterString.trim();

    // 2. Apply the constructed filters and draw the image.
    if (filterString) {
        ctx.filter = filterString;
    }
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // 3. Reset filters: This is crucial so that subsequent drawing operations (like the tint)
    // are not affected by the filters applied to the main image.
    ctx.filter = 'none';

    // 4. Apply a tint layer if a valid tintColor string is provided.
    if (tintColor && typeof tintColor === 'string' && tintColor.trim() !== '') {
        const oldCompositeOperation = ctx.globalCompositeOperation;
        
        // Validate tintBlendMode. List of common and valid blend modes.
        // Browsers usually default to 'source-over' or ignore invalid modes, 
        // but explicit validation provides robustness or a preferred fallback.
        const validBlendModes = [
            '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 (validBlendModes.includes(tintBlendMode)) {
            ctx.globalCompositeOperation = tintBlendMode;
        } else {
            // Fallback to a sensible default if an unrecognized mode is specified.
            // console.warn(`Invalid tintBlendMode: "${tintBlendMode}". Using 'soft-light'.`);
            ctx.globalCompositeOperation = 'soft-light'; 
        }
        
        ctx.fillStyle = tintColor;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        // Restore the original composite operation.
        ctx.globalCompositeOperation = oldCompositeOperation;
    }

    return canvas;
}