Cool Twilight Photo Filter 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;
}