Image Rust Patina Effect Adder

/**
 * Applies a rust and patina effect to an image.
 * This function generates a procedural noise texture based on rust and patina colors
 * and blends it over the original image to simulate a weathered, corroded look.
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {number} rustIntensity The amount of rust coverage, from 0 (none) to 1 (full). Default is 0.4.
 * @param {string} rustColor The hex color code for the primary rust color. Default is '#782f1b'.
 * @param {string} patinaColor The hex color code for the secondary patina/verdigris color. Default is '#5d7d64'.
 * @param {number} patinaRatio The proportion of patina relative to rust within the affected areas, from 0 to 1. Default is 0.3.
 * @param {string} blendMode The composition blend mode to use. Suggest 'overlay', 'multiply', 'color-burn', or 'hard-light'. Default is 'overlay'.
 * @returns {HTMLCanvasElement} A new canvas element with the rust effect applied.
 */
function processImage(originalImg, rustIntensity = 0.4, rustColor = '#782f1b', patinaColor = '#5d7d64', patinaRatio = 0.3, blendMode = 'overlay') {
    // Helper function to parse hex color string to an RGB 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;
    };

    const rColor = hexToRgb(rustColor) || { r: 120, g: 47, b: 27 }; // Default fallback
    const pColor = hexToRgb(patinaColor) || { r: 93, g: 125, b: 100 }; // Default fallback

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;

    // --- Step 1: Create the rust/patina texture in memory ---
    const textureCanvas = document.createElement('canvas');
    const textureCtx = textureCanvas.getContext('2d');
    textureCanvas.width = canvas.width;
    textureCanvas.height = canvas.height;

    const imageData = textureCtx.createImageData(canvas.width, canvas.height);
    const data = imageData.data;

    for (let i = 0; i < data.length; i += 4) {
        // Decide if this pixel should have rust
        if (Math.random() < rustIntensity) {
            // If so, decide if it's rust or patina
            const chosenColor = (Math.random() < patinaRatio) ? pColor : rColor;
            
            // Add some variation to the color brightness/alpha to make it less flat
            const variation = 0.7 + Math.random() * 0.3; // between 0.7 and 1.0
            const alpha = 100 + Math.random() * 155; // between 100 and 255
            
            data[i] = chosenColor.r * variation;
            data[i + 1] = chosenColor.g * variation;
            data[i + 2] = chosenColor.b * variation;
            data[i + 3] = alpha;
        } else {
            // Make the pixel transparent if no rust is applied
            data[i + 3] = 0;
        }
    }

    // Put the generated texture onto its canvas
    textureCtx.putImageData(imageData, 0, 0);

    // --- Step 2: Composite the layers ---
    // Draw the original image first
    ctx.drawImage(originalImg, 0, 0);

    // Set the blend mode
    ctx.globalCompositeOperation = blendMode;

    // Draw the rust texture on top
    ctx.drawImage(textureCanvas, 0, 0);

    // Reset the blend mode to default for good practice
    ctx.globalCompositeOperation = 'source-over';
    
    return canvas;
}