Image Nuance Effect Tool

/**
 * Applies a "nuance" or duotone effect to an image by mapping its grayscale
 * values to a gradient between two specified colors.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {string} startColor The color to map to the darkest parts of the image (e.g., '#0000ff').
 * @param {string} endColor The color to map to the lightest parts of the image (e.g., '#ffff00').
 * @returns {HTMLCanvasElement} A new canvas element with the nuance effect applied.
 */
function processImage(originalImg, startColor = '#0000ff', endColor = '#ffff00') {
    // Create a new canvas 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;

    // 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;

    // Helper function to parse a hex color string into an {r, g, b} object
    const parseColor = (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;
    };

    const startRGB = parseColor(startColor);
    const endRGB = parseColor(endColor);

    // If colors are invalid, return the original image on the canvas
    if (!startRGB || !endRGB) {
        console.error("Invalid color format provided. Please use hex color codes like '#RRGGBB'.");
        return canvas;
    }

    // Iterate over each pixel in the image data array
    // The array is flat, containing R, G, B, and Alpha values for each pixel
    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 grayscale luminance of the pixel using a standard formula
        const luminance = 0.299 * r + 0.587 * g + 0.114 * b;

        // Normalize the luminance to a value between 0 (black) and 1 (white)
        const normalizedLuminance = luminance / 255;

        // Use linear interpolation to find the new color based on the luminance
        const newR = startRGB.r * (1 - normalizedLuminance) + endRGB.r * normalizedLuminance;
        const newG = startRGB.g * (1 - normalizedLuminance) + endRGB.g * normalizedLuminance;
        const newB = startRGB.b * (1 - normalizedLuminance) + endRGB.b * normalizedLuminance;

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

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

    // Return the canvas element
    return canvas;
}