Image Tarnished Silver Filter Effect Tool

/**
 * Applies a "Tarnished Silver" filter effect to an image.
 * This effect converts the image to high-contrast grayscale to simulate a metallic silver look,
 * and then blends a "tarnish" color, primarily into the darker areas, to simulate aging.
 *
 * @param {Image} originalImg The original HTMLImageElement or compatible image source.
 * @param {number} [contrast=1.8] The contrast factor. Values > 1 increase contrast. Recommended: 1.5-2.5.
 * @param {string} [tarnishColorStr="80,70,60"] An RGB string for the tarnish color, e.g., "R,G,B". Default is a dark brownish-gray.
 * @param {number} [tarnishIntensity=0.3] The intensity of the tarnish effect, from 0 (no tarnish) to 1 (full tarnish influence).
 * @returns {HTMLCanvasElement} A new canvas element with the tarnished silver effect applied.
 */
function processImage(originalImg, contrast = 1.8, tarnishColorStr = "80,70,60", tarnishIntensity = 0.3) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the original image
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

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

    // Get image data to manipulate pixels
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // Parse and validate tarnishColorStr
    let tarnishR_val = 80; // Default tarnish color red component
    let tarnishG_val = 70; // Default tarnish color green component
    let tarnishB_val = 60; // Default tarnish color blue component
    
    const colorParts = tarnishColorStr.split(',').map(s => parseInt(s.trim(), 10));
    if (colorParts.length === 3 && colorParts.every(num => !isNaN(num) && num >= 0 && num <= 255)) {
        tarnishR_val = colorParts[0];
        tarnishG_val = colorParts[1];
        tarnishB_val = colorParts[2];
    }
    // else: use default tarnish color components already set above

    // Clamp and validate other parameters
    const effectiveContrast = Math.max(0, Number(contrast)); // Ensure contrast is non-negative
    const effectiveTarnishIntensity = Math.max(0, Math.min(1, Number(tarnishIntensity))); // Clamp intensity to [0, 1]

    // Process each pixel
    for (let i = 0; i < data.length; i += 4) {
        const r_orig = data[i];
        const g_orig = data[i + 1];
        const b_orig = data[i + 2];

        // 1. Convert to Grayscale (Luminosity method)
        // Standard formula for luminance: Y = 0.299R + 0.587G + 0.114B
        let gray = 0.299 * r_orig + 0.587 * g_orig + 0.114 * b_orig;

        // 2. Apply Contrast
        // Formula: NewValue = Factor * (OldValue - MidPoint) + MidPoint
        // MidPoint for 0-255 range is 128.
        gray = effectiveContrast * (gray - 128) + 128;
        gray = Math.max(0, Math.min(255, gray)); // Clamp to [0, 255]

        // 3. Apply Tarnish Coloration
        // The tarnish effect is blended based on the contrasted gray value.
        // Brighter areas (closer to 255) will show less tarnish.
        // Darker areas (closer to 0) will show more tarnish.
        
        const normalizedContrastedGray = gray / 255.0; 
        
        // mixFactor determines how much of the tarnish color is blended in.
        // (1.0 - normalizedContrastedGray) means more tarnish influence for darker pixels.
        const mixFactor = effectiveTarnishIntensity * (1.0 - normalizedContrastedGray); 

        // Blend the contrasted gray with the tarnish color
        // Result = BaseColor * (1 - Mix) + BlendColor * Mix
        const finalR = gray * (1 - mixFactor) + tarnishR_val * mixFactor;
        const finalG = gray * (1 - mixFactor) + tarnishG_val * mixFactor;
        const finalB = gray * (1 - mixFactor) + tarnishB_val * mixFactor;

        // Assign the new pixel values, ensuring they are integers within [0, 255]
        data[i] = Math.round(Math.max(0, Math.min(255, finalR)));
        data[i + 1] = Math.round(Math.max(0, Math.min(255, finalG)));
        data[i + 2] = Math.round(Math.max(0, Math.min(255, finalB)));
        // Alpha channel (data[i + 3]) remains unchanged
    }

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

    return canvas;
}