Photo Somber Filter

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

    // Ensure the image is loaded before attempting to get its dimensions
    // This function assumes originalImg is already loaded (e.g., from an <img> tag or new Image() with .onload)
    // For robustness, one might add originalImg.onload handling if it's not guaranteed.
    // However, per typical usage where originalImg is passed after loading, direct access is fine.
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

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

    ctx.drawImage(originalImg, 0, 0, width, height);

    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // Constants for the somber filter
    const LUMINANCE_R_COEFF = 0.299;
    const LUMINANCE_G_COEFF = 0.587;
    const LUMINANCE_B_COEFF = 0.114;

    // Factors to create the cool, slightly dark tint from luminance
    // These make the "somber gray" color that will be blended with the original
    // (0.7, 0.8, 1.0) makes blue relatively stronger, and overall darker since sum/3 < 1
    const SOMBER_TINT_R_FACTOR = 0.7; // Less red
    const SOMBER_TINT_G_FACTOR = 0.8; // Slightly less green
    const SOMBER_TINT_B_FACTOR = 1.0; // Keep blue (making it relatively stronger)

    // Mix factor: How much of the "somber gray" tone to apply.
    // 0.0 means original image, 1.0 means fully tinted grayscale.
    // A high value (e.g., 0.85) means significant desaturation towards the somber tone.
    const MIX_FACTOR = 0.85;

    for (let i = 0; i < data.length; i += 4) {
        const r_original = data[i];
        const g_original = data[i + 1];
        const b_original = data[i + 2];

        // Calculate luminance (perceived brightness)
        const luminance =
            LUMINANCE_R_COEFF * r_original +
            LUMINANCE_G_COEFF * g_original +
            LUMINANCE_B_COEFF * b_original;

        // Calculate the "somber gray" components based on luminance
        const somberR_component = luminance * SOMBER_TINT_R_FACTOR;
        const somberG_component = luminance * SOMBER_TINT_G_FACTOR;
        const somberB_component = luminance * SOMBER_TINT_B_FACTOR;

        // Blend the original color with the "somber gray" components
        data[i] = r_original * (1 - MIX_FACTOR) + somberR_component * MIX_FACTOR;
        data[i + 1] = g_original * (1 - MIX_FACTOR) + somberG_component * MIX_FACTOR;
        data[i + 2] = b_original * (1 - MIX_FACTOR) + somberB_component * MIX_FACTOR;
        // Alpha channel (data[i + 3]) remains unchanged
    }

    ctx.putImageData(imageData, 0, 0);
    return canvas;
}