Image Silver Tone Filter Application

function processImage(originalImg, contrastAmount = 1.5, blueTintStrength = 0.05) {
    // Validate parameters
    contrastAmount = Number(contrastAmount);
    if (isNaN(contrastAmount) || contrastAmount < 0) {
        contrastAmount = 1.5; // Default contrast: 1.0 is no change, >1 increases contrast
    }

    blueTintStrength = Number(blueTintStrength);
    if (isNaN(blueTintStrength) || blueTintStrength < 0 || blueTintStrength > 1) {
        blueTintStrength = 0.05; // Default tint strength: 0 is no tint, 1 is strong tint
    }

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

    // Ensure the image has dimensions. If not, it might not be loaded.
    const imgWidth = originalImg.naturalWidth;
    const imgHeight = originalImg.naturalHeight;

    if (imgWidth === 0 || imgHeight === 0) {
        console.error("Image has zero width or height. Ensure the image is fully loaded before calling processImage.");
        // Set canvas to a small size to prevent errors if it must be returned
        canvas.width = 1;
        canvas.height = 1;
        return canvas;
    }

    canvas.width = imgWidth;
    canvas.height = imgHeight;

    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        console.error("Could not get image data. This might be due to CORS restrictions if the image is from a different origin and the canvas is tainted.", e);
        // Return the canvas with the original image drawn, as processing is not possible.
        return canvas;
    }
    
    const data = imageData.data;
    const midPoint = 128; // Midpoint for contrast calculation (0-255 range)

    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];

        // 1. Convert to grayscale (luminosity method - Rec. 709 standard)
        // This formula gives a visually pleasing grayscale representation.
        let gray = 0.2126 * r + 0.7152 * g + 0.0722 * b;

        // 2. Apply contrast adjustment
        // Formula: NewValue = factor * (OldValue - MidPoint) + MidPoint
        gray = contrastAmount * (gray - midPoint) + midPoint;
        
        // Clamp gray value to ensure it stays within the 0-255 range
        gray = Math.max(0, Math.min(255, gray));
        
        // 3. Apply "silver tone" tint (subtle bluish/cool tint)
        let finalR = gray;
        let finalG = gray;
        let finalB = gray;

        if (blueTintStrength > 0) {
            // Apply a cool tint. Increase blue, slightly decrease red/green to balance perception.
            // The strength of the tint is controlled by blueTintStrength.
            // This creates a subtle shift towards a cooler, more "metallic" hue without drastically changing brightness.
            finalR = gray * (1 - blueTintStrength * 0.5); // Reduce red slightly
            finalG = gray * (1 - blueTintStrength * 0.25); // Reduce green even less
            finalB = gray * (1 + blueTintStrength);        // Increase blue

            // Clamp all color components again after tinting
            finalR = Math.max(0, Math.min(255, finalR));
            finalG = Math.max(0, Math.min(255, finalG));
            finalB = Math.max(0, Math.min(255, finalB));
        }
        
        data[i]     = Math.round(finalR);
        data[i + 1] = Math.round(finalG);
        data[i + 2] = Math.round(finalB);
        // Alpha channel (data[i+3]) remains unchanged
    }

    ctx.putImageData(imageData, 0, 0);
    return canvas;
}