Image Tritone Effect Adder

/**
 * Applies a tritone effect to an image by mapping its luminance to three specified colors.
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {string} shadowsColor The color for the darkest parts of the image (in hex format, e.g., '#2b1200').
 * @param {string} midtonesColor The color for the mid-range tones of the image (in hex format, e.g., '#96784d').
 * @param {string} highlightsColor The color for the brightest parts of the image (in hex format, e.g., '#ede5d6').
 * @returns {HTMLCanvasElement} A new canvas element with the tritone effect applied.
 */
function processImage(originalImg, shadowsColor = '#2b1200', midtonesColor = '#96784d', highlightsColor = '#ede5d6') {
    // Create a canvas element to draw on
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the original image
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    /**
     * Converts a hex color string to an RGB object.
     * Supports both 3-digit and 6-digit hex formats.
     * @param {string} hex The hex color string (e.g., "#FFF", "#ff0000").
     * @returns {{r: number, g: number, b: number}|null} An object with r, g, b properties, or null if invalid.
     */
    const hexToRgb = (hex) => {
        // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
        const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
        hex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b);

        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        return result ? {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16)
        } : null;
    };

    /**
     * Linearly interpolates between two values.
     * @param {number} start The start value.
     * @param {number} end The end value.
     * @param {number} amount The interpolation amount (0.0 to 1.0).
     * @returns {number} The interpolated value.
     */
    const lerp = (start, end, amount) => {
        return (1 - amount) * start + amount * end;
    };

    // Parse the input hex colors into RGB objects
    const sColor = hexToRgb(shadowsColor);
    const mColor = hexToRgb(midtonesColor);
    const hColor = hexToRgb(highlightsColor);

    // If any color is invalid, draw the original image and return to avoid errors
    if (!sColor || !mColor || !hColor) {
        console.error("Invalid hex color format provided. Please use #RRGGBB or #RGB format.");
        ctx.drawImage(originalImg, 0, 0);
        return canvas;
    }

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

    // Get the pixel data from the canvas
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // Iterate over each pixel in the image data
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];

        // Calculate the luminance (brightness) of the pixel using a standard formula
        const luminance = 0.299 * r + 0.587 * g + 0.114 * b;

        let newR, newG, newB;

        // Based on the luminance, interpolate between the tritone colors
        if (luminance < 128) {
            // Map to the gradient between shadows and midtones
            const amount = luminance / 127.5; // Normalize luminance to a 0-1 range
            newR = lerp(sColor.r, mColor.r, amount);
            newG = lerp(sColor.g, mColor.g, amount);
            newB = lerp(sColor.b, mColor.b, amount);
        } else {
            // Map to the gradient between midtones and highlights
            const amount = (luminance - 127.5) / 127.5; // Normalize luminance to a 0-1 range
            newR = lerp(mColor.r, hColor.r, amount);
            newG = lerp(mColor.g, hColor.g, amount);
            newB = lerp(mColor.b, hColor.b, amount);
        }

        // Update the pixel data with the new tritone colors
        data[i] = newR;
        data[i + 1] = newG;
        data[i + 2] = newB;
        // The alpha channel (data[i + 3]) is preserved
    }

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

    // Return the final canvas with the tritone effect
    return canvas;
}