Image Duotone Color Adder

function processImage(originalImg, color1 = '#002f4b', color2 = '#ff4d4d') {
    /**
     * Helper function to parse hex color strings (e.g., '#RRGGBB' or '#RGB')
     * into an object with r, g, b properties.
     * @param {string} hex - The hex color string.
     * @returns {{r: number, g: number, b: number}} An object with color components.
     */
    const parseHexColor = (hex) => {
        // Remove leading '#' if present
        if (hex.startsWith('#')) {
            hex = hex.slice(1);
        }

        // Handle 3-digit shorthand hex (e.g., 'F09' -> 'FF0099')
        if (hex.length === 3) {
            hex = hex.split('').map(char => char + char).join('');
        }

        // If the hex code is not valid (not 6 digits), default to black
        if (hex.length !== 6) {
            return {
                r: 0,
                g: 0,
                b: 0
            };
        }

        const r = parseInt(hex.substring(0, 2), 16);
        const g = parseInt(hex.substring(2, 4), 16);
        const b = parseInt(hex.substring(4, 6), 16);

        return { r, g, b };
    };

    const canvas = document.createElement('canvas');
    // Use naturalWidth/Height to get the original image dimensions
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;
    const ctx = canvas.getContext('2d');

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

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

    // Parse the two input colors
    const parsedColor1 = parseHexColor(color1); // Corresponds to shadows (dark)
    const parsedColor2 = parseHexColor(color2); // Corresponds to highlights (light)

    // Iterate over each pixel (each pixel is 4 values: R,G,B,A)
    for (let i = 0; i < data.length; i += 4) {
        // First, convert the pixel to grayscale using the luminance formula
        const gray = data[i] * 0.299 + data[i + 1] * 0.587 + data[i + 2] * 0.114;

        // Normalize the grayscale value to be a factor between 0 and 1
        const t = gray / 255;

        // Linearly interpolate between the two duotone colors based on the grayscale value
        // The formula is: newColor = color1 * (1 - t) + color2 * t
        data[i] = parsedColor1.r * (1 - t) + parsedColor2.r * t; // Red channel
        data[i + 1] = parsedColor1.g * (1 - t) + parsedColor2.g * t; // Green channel
        data[i + 2] = parsedColor1.b * (1 - t) + parsedColor2.b * t; // Blue channel
        // The Alpha channel (data[i + 3]) is left unchanged to preserve transparency
    }

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

    // Return the resulting canvas element
    return canvas;
}