Please bookmark this page to avoid losing your image tool!

Cool Twilight 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) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true }); // Opt-in for performance if supported

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

    // 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, ...]

    // Define filter parameters
    const rFactor = 0.65;   // Reduce red
    const gFactor = 0.80;   // Slightly reduce green
    const bFactor = 1.15;   // Boost blue
    const bAdditive = 20;   // Add a base amount of blue for dark areas

    const brightnessFactor = 0.9; // Darken the image (0.0 to 1.0+)
    const contrastFactor = 1.1;   // Increase contrast (1.0 is no change)

    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 filters like this

        // 1. Apply initial color transformation for twilight hue
        r = r * rFactor;
        g = g * gFactor;
        b = b * bFactor + bAdditive;

        // Clamp values after initial tinting
        r = Math.max(0, Math.min(255, r));
        g = Math.max(0, Math.min(255, g));
        b = Math.max(0, Math.min(255, b));

        // 2. Apply brightness adjustment
        r *= brightnessFactor;
        g *= brightnessFactor;
        b *= brightnessFactor;

        // Clamp values after brightness adjustment
        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. Apply contrast adjustment
        // The midpoint for contrast is 128 for values in [0, 255]
        r = (r - 128) * contrastFactor + 128;
        g = (g - 128) * contrastFactor + 128;
        b = (b - 128) * contrastFactor + 128;

        // Final clamping to ensure values are within [0, 255]
        data[i] = Math.max(0, Math.min(255, r));
        data[i + 1] = Math.max(0, Math.min(255, g));
        data[i + 2] = Math.max(0, Math.min(255, b));
    }

    // Put the modified image data back onto the canvas
    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 Cool Twilight Photo Filter Tool allows users to enhance their images by applying a twilight-inspired color filter. This tool adjusts the red, green, and blue color channels to create a serene, twilight ambiance, while also modifying brightness and contrast for a more dramatic effect. It can be particularly useful for photographers and social media users looking to add a unique touch to their photos, making them appear more captivating and mood-enhancing.

Leave a Reply

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