Lively Photo Filter

/**
 * Applies a "Lively Photo Filter" to an image by adjusting its saturation and contrast.
 * This function leverages the Canvas API's filter capabilities for efficient processing.
 *
 * @param {Image} originalImg The original JavaScript Image object.
 *                            It's assumed this image is already loaded and has valid dimensions.
 * @param {number} [saturationMultiplier=1.5] Defines the saturation level of the image.
 *                                            1.0 means original saturation.
 *                                            Values > 1.0 increase saturation (e.g., 1.5 means 150% saturation).
 *                                            Values < 1.0 decrease saturation (e.g., 0.5 means 50% saturation).
 *                                            A value of 0 will result in a grayscale image.
 *                                            Must be non-negative.
 * @param {number} [contrastMultiplier=1.2] Defines the contrast level of the image.
 *                                          1.0 means original contrast.
 *                                          Values > 1.0 increase contrast (e.g., 1.2 means 120% contrast).
 *                                          Values < 1.0 decrease contrast (e.g., 0.8 means 80% contrast).
 *                                          A value of 0 will result in an image with no contrast (flat color/gray).
 *                                          Must be non-negative.
 * @returns {HTMLCanvasElement} A canvas element displaying the processed image.
 */
function processImage(originalImg, saturationMultiplier = 1.5, contrastMultiplier = 1.2) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/naturalHeight for intrinsic image dimensions if available,
    // otherwise fallback to width/height (which might be set by CSS or attributes).
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    canvas.width = width;
    canvas.height = height;

    // If image dimensions are invalid (e.g., image not loaded yet or is a 0x0 image),
    // log an error and return the (potentially empty or 0x0) canvas.
    if (width === 0 || height === 0) {
        console.error("Image dimensions are zero. Ensure image is properly loaded and valid before processing.");
        return canvas;
    }

    // Sanitize multiplier inputs to ensure they are non-negative,
    // as CSS filter values (saturate, contrast) expect non-negative percentages.
    const saneSaturationMultiplier = Math.max(0, saturationMultiplier);
    const saneContrastMultiplier = Math.max(0, contrastMultiplier);

    // Convert multipliers to percentage values for the CSS filter syntax.
    // e.g., 1.5 becomes 150(%).
    const saturationPercent = Math.round(saneSaturationMultiplier * 100);
    const contrastPercent = Math.round(saneContrastMultiplier * 100);
    
    let filterString = "";
    
    // Add the saturate filter to the string if the multiplier is not 1.0
    // (100% saturation is the default, meaning no change).
    if (saneSaturationMultiplier !== 1.0) {
        filterString += `saturate(${saturationPercent}%) `;
    }
    
    // Add the contrast filter to the string if the multiplier is not 1.0
    // (100% contrast is the default, meaning no change).
    if (saneContrastMultiplier !== 1.0) {
        filterString += `contrast(${contrastPercent}%)`;
    }
    
    // Trim any trailing space if only one filter was active or if both were default.
    filterString = filterString.trim();

    // Apply the combined filter string to the canvas context only if there are active filters.
    if (filterString) {
        ctx.filter = filterString;
    }
    
    // Draw the original image onto the canvas.
    // The context's filter (if any) will be applied during this drawing operation.
    ctx.drawImage(originalImg, 0, 0, width, height);
    
    // The canvas now holds the filtered image.
    return canvas;
}