Image Gold Color Generator

/**
 * Applies a "gold" color effect to an image by converting it to grayscale
 * and then mapping the brightness levels to a gradient between two gold shades.
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {number} intensity The strength of the gold effect, from 0.0 (no effect) to 1.0 (full effect). Defaults to 1.0.
 * @param {string} lightGoldColor The hex color code for the lighter parts of the gold effect. Defaults to '#FFDF00' (Gold).
 * @param {string} darkGoldColor The hex color code for the darker parts of the gold effect. Defaults to '#B8860B' (DarkGoldenRod).
 * @returns {HTMLCanvasElement} A canvas element with the gold-toned image.
 */
function processImage(originalImg, intensity = 1.0, lightGoldColor = '#FFDF00', darkGoldColor = '#B8860B') {
    // Helper function to parse a hex color string into an {r, g, b} object.
    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;
    };

    // Create a new canvas element
    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 image data from the canvas
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // Parse the provided gold hex colors
    const lightGold = hexToRgb(lightGoldColor);
    const darkGold = hexToRgb(darkGoldColor);

    // If colors are invalid, return the original image on the canvas
    if (!lightGold || !darkGold) {
        console.error("Invalid hex color code provided. Returning original image.");
        return canvas;
    }
    
    // Clamp the intensity value to be between 0.0 and 1.0
    const clampedIntensity = Math.max(0.0, Math.min(1.0, intensity));

    // Iterate through each pixel of 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 grayscale value (luminance) of the pixel
        // Using the standard Rec. 709 primaries for luminance calculation
        const grayscale = 0.2126 * r + 0.7152 * g + 0.0722 * b;
        const normalizedGray = grayscale / 255; // Normalize to a 0.0-1.0 range

        // Interpolate between the dark and light gold colors based on the grayscale value
        const goldR = darkGold.r * (1 - normalizedGray) + lightGold.r * normalizedGray;
        const goldG = darkGold.g * (1 - normalizedGray) + lightGold.g * normalizedGray;
        const goldB = darkGold.b * (1 - normalizedGray) + lightGold.b * normalizedGray;
        
        // Blend the new gold color with the original pixel color based on the intensity
        data[i]     = r * (1 - clampedIntensity) + goldR * clampedIntensity; // Red channel
        data[i + 1] = g * (1 - clampedIntensity) + goldG * clampedIntensity; // Green channel
        data[i + 2] = b * (1 - clampedIntensity) + goldB * clampedIntensity; // Blue channel
        // The alpha channel (data[i + 3]) remains unchanged
    }

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

    // Return the resulting canvas
    return canvas;
}