Tranquil Photo Filter Tool

function processImage(originalImg, intensity = 0.7) {
    // Ensure intensity is a number and clamp it to the valid range [0, 1]
    const currentIntensity = Math.max(0, Math.min(1, Number(intensity)));

    const canvas = document.createElement('canvas');
    // Using { willReadFrequently: true } can be an optimization hint for
    // repeated getImageData/putImageData calls, though for a single filter pass,
    // its impact might be minimal. It's good practice for clarity of intent.
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

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

    // If intensity is 0, no processing is needed.
    // The canvas already contains the original image.
    if (currentIntensity === 0) {
        return canvas;
    }

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

    // Constants defining the "Tranquil" filter's characteristics when intensity is 1.0
    const DESATURATION_EFFECT = 0.3; // Degree of desaturation (0.0 to 1.0). 0.3 means 30% towards grayscale.
    const RED_TINT_FACTOR = 0.95;    // Multiplicative factor for the red channel.
    const GREEN_TINT_FACTOR = 1.02;  // Multiplicative factor for the green channel.
    const BLUE_TINT_FACTOR = 1.08;   // Multiplicative factor for the blue channel.
    const BRIGHTNESS_BOOST = 15;     // Additive brightness boost (applied after tinting).

    for (let i = 0; i < data.length; i += 4) {
        const origR = data[i];
        const origG = data[i+1];
        const origB = data[i+2];

        // --- Calculate the pixel values for the full filter effect (intensity = 1.0) ---

        // 1. Apply Desaturation
        // Luma calculation (standard coefficients for perceived brightness)
        const luma = 0.299 * origR + 0.587 * origG + 0.114 * origB;
        
        // Interpolate original color components towards luma
        let r_effect = origR + DESATURATION_EFFECT * (luma - origR);
        let g_effect = origG + DESATURATION_EFFECT * (luma - origG);
        let b_effect = origB + DESATURATION_EFFECT * (luma - origB);

        // 2. Apply Color Tinting
        r_effect = r_effect * RED_TINT_FACTOR;
        g_effect = g_effect * GREEN_TINT_FACTOR;
        b_effect = b_effect * BLUE_TINT_FACTOR;

        // 3. Apply Brightness Boost
        r_effect = r_effect + BRIGHTNESS_BOOST;
        g_effect = g_effect + BRIGHTNESS_BOOST;
        b_effect = b_effect + BRIGHTNESS_BOOST;

        // --- Interpolate between original pixel and full-effect pixel based on currentIntensity ---
        // No need to clamp r_effect, g_effect, b_effect here. Clamping is done on the final result.
        // This allows the intensity to blend towards an "ideal" filtered color, even if that ideal
        // is temporarily out of the 0-255 range, providing a more natural blend at boundaries.

        data[i]   = origR * (1 - currentIntensity) + r_effect * currentIntensity;
        data[i+1] = origG * (1 - currentIntensity) + g_effect * currentIntensity;
        data[i+2] = origB * (1 - currentIntensity) + b_effect * currentIntensity;
        
        // Clamp the final pixel values to the valid [0, 255] range
        data[i]   = Math.max(0, Math.min(255, data[i]));
        data[i+1] = Math.max(0, Math.min(255, data[i+1]));
        data[i+2] = Math.max(0, Math.min(255, data[i+2]));
        
        // Alpha channel (data[i+3]) remains unchanged
    }

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