Photo Peaceful Filter

function processImage(originalImg, desaturationLevel = 0.2, tintStrength = 15, brightnessAdjust = 10, contrastAdjust = 0.95) {
    const canvas = document.createElement('canvas');
    // Using { willReadFrequently: true } can be a hint for performance optimization on some browsers
    // if there are many readbacks (getImageData).
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // Use naturalWidth/Height to ensure dimensions are from the loaded image,
    // not potentially CSS-styled dimensions if originalImg is an HTMLImageElement in the DOM.
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // Get the image data from the canvas
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data; // This is a Uint8ClampedArray: [R,G,B,A, R,G,B,A, ...]

    // Iterate over each pixel
    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];
        // Alpha (data[i + 3]) is typically left unchanged for this kind of filter

        // 1. Adjust Brightness
        // Positive brightnessAdjust increases brightness, negative decreases.
        r += brightnessAdjust;
        g += brightnessAdjust;
        b += brightnessAdjust;

        // 2. Adjust Contrast
        // contrastAdjust > 1 increases contrast, < 1 decreases (softens). 1 means no change.
        // Formula: NewVal = (OldVal - 128) * Factor + 128
        // This works by scaling the difference from the mid-gray value (128).
        r = (r - 128) * contrastAdjust + 128;
        g = (g - 128) * contrastAdjust + 128;
        b = (b - 128) * contrastAdjust + 128;
        
        // Clamp intermediate results to prevent issues in subsequent calculations,
        // especially if brightness/contrast pushed values far out of 0-255 range.
        r = Math.max(0, Math.min(255, r));
        g = Math.max(0, Math.min(255, g));
        b = Math.max(0, Math.min(255, b));

        // 3. Desaturation
        // desaturationLevel = 0 means no change, 1 means fully grayscale.
        if (desaturationLevel > 0 && desaturationLevel <= 1) {
            // Using ITU-R BT.709 luma coefficients for perceived brightness:
            const L = 0.2126 * r + 0.7152 * g + 0.0722 * b;
            const desat = desaturationLevel; // Alias for clarity
            
            r = r * (1 - desat) + L * desat;
            g = g * (1 - desat) + L * desat;
            b = b * (1 - desat) + L * desat;
        }
        
        // 4. Apply Cool Tint (for "Peaceful" effect)
        // tintStrength determines the intensity of the cool (blue/cyan) coloration.
        // Positive values add coolness, negative could add warmth (not the goal here).
        if (tintStrength !== 0) {
            // These specific factors aim for a pleasant cool tint:
            // Slightly reduce red, slightly increase green (for a cyan/aqua hint), moderately increase blue.
            r -= tintStrength * 0.25; 
            g += tintStrength * 0.10; 
            b += tintStrength * 0.65; 
        }

        // Final Clamping and Assignment
        // Ensure values are within the 0-255 range and round them to integers.
        // Uint8ClampedArray would do clamping and rounding, but Math.round() is more explicit.
        data[i] = Math.round(Math.max(0, Math.min(255, r)));
        data[i + 1] = Math.round(Math.max(0, Math.min(255, g)));
        data[i + 2] = Math.round(Math.max(0, Math.min(255, b)));
        // data[i + 3] (alpha) remains unchanged
    }

    // Put the modified image data back onto the canvas
    ctx.putImageData(imageData, 0, 0);

    return canvas;
}