Please bookmark this page to avoid losing your image tool!

Tranquil Photo Filter Tool

(Free & Supports Bulk Upload)

Drag & drop your images here or

The result will appear here...
You can edit the below JavaScript code to customize the image 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;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Description

The Tranquil Photo Filter Tool allows users to apply a calming filter to their images by adjusting desaturation, color tinting, and brightness. The intensity of the effect can be customized, making it suitable for those looking to enhance their photos for aesthetic appeal or to create a soothing atmosphere. This tool is ideal for photographers, graphic designers, or anyone looking to improve their images for social media, presentations, or personal projects.

Leave a Reply

Your email address will not be published. Required fields are marked *