Image Signature Translator

/**
 * Processes an image of a signature, removing its background and optionally changing its color.
 * It assumes the signature is dark on a light background.
 *
 * @param {Image} originalImg The original Image object containing the signature.
 * @param {string} color The desired color for the final signature in hex format (e.g., '#0000FF'). Defaults to black.
 * @param {number} threshold A brightness threshold from 0 to 255. Pixels brighter than this value will be considered background and made transparent. Lower values are stricter. Defaults to 150.
 * @returns {HTMLCanvasElement} A canvas element with the processed signature on a transparent background.
 */
function processImage(originalImg, color = '#000000', threshold = 150) {
    // 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 pixel data from the canvas
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    /**
     * Converts a hex color string to an RGB object.
     * @param {string} hex The hex color string (e.g., "#FF0000" or "#F00").
     * @returns {{r: number, g: number, b: number}|null} An object with r, g, b properties or null if invalid.
     */
    function 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;
    }

    let targetColor = hexToRgb(color);
    if (!targetColor) {
        console.error("Invalid color format provided. Using black.");
        targetColor = { r: 0, g: 0, b: 0 };
    }

    // Ensure threshold is within the valid 0-255 range
    const validThreshold = Math.max(0, Math.min(255, threshold));

    // Iterate through each pixel (represented by 4 values: R, G, B, A)
    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 (perceived brightness) of the pixel.
        const luminance = 0.299 * r + 0.587 * g + 0.114 * b;

        // If the pixel is brighter than the threshold, treat it as background.
        if (luminance > validThreshold) {
            // Make the background pixel fully transparent.
            data[i + 3] = 0;
        } else {
            // Otherwise, treat it as part of the signature (foreground).
            // Recolor the pixel to the target color.
            data[i] = targetColor.r;
            data[i + 1] = targetColor.g;
            data[i + 2] = targetColor.b;

            // Adjust the alpha channel based on the original pixel's darkness.
            // This creates a smooth, anti-aliased edge instead of a hard cutoff.
            // A pixel at the luminance threshold will become fully transparent.
            // A black pixel (luminance 0) will become fully opaque.
            const alpha = 255 * (1 - (luminance / validThreshold));
            data[i + 3] = alpha;
        }
    }

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

    // Return the canvas element containing the processed image
    return canvas;
}