Photo Gloomy Filter

function processImage(originalImg) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height for intrinsic image dimensions, fallback to width/height
    // This ensures we use the original image size, not any styled/resized version.
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    // Set canvas dimensions to match the image
    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // Define the "gloomy" filter properties.
    // This combination aims for a desaturated, darker, slightly higher contrast image
    // with a cool (blueish/cyanish) tint, often associated with a "gloomy" atmosphere.

    // 1. Saturate: Reduces color vibrancy. 20% saturation makes it very muted.
    const saturation = '20%';
    // 2. Brightness: Darkens the image. 75% brightness is noticeably darker.
    const brightnessValue = '75%';
    // 3. Contrast: Increases the difference between light and dark areas. 120% is a moderate boost.
    const contrastValue = '120%';
    // 4. Cool Tint: This is achieved by applying a sepia tone and then rotating its hue by 180 degrees.
    //    Sepia filter typically adds a warm (yellowish-brown) tone.
    //    Rotating this warm tone by 180 degrees on the color wheel shifts it to cool (blueish-cyan) tones.
    const sepiaAmount = '30%'; // A moderate sepia effect to serve as the base for the tint.
    const hueRotation = '180deg'; // Inverts the sepia's warmth to coolness.

    // Construct the filter string.
    // The order of filters can affect the final result. This order is standard.
    ctx.filter = `saturate(${saturation}) ` +
                 `brightness(${brightnessValue}) ` +
                 `contrast(${contrastValue}) ` +
                 `sepia(${sepiaAmount}) ` +
                 `hue-rotate(${hueRotation})`;

    // Draw the original image onto the canvas.
    // The filter defined above will be applied to the image as it's drawn.
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // It's good practice to reset the filter on the context if the context were to be reused
    // for other drawing operations immediately after this. However, since we are creating a new canvas
    // and context each time and returning the canvas, this is not strictly necessary for this function's isolated behavior.
    // Example: ctx.filter = 'none';

    return canvas;
}