Image Tintype Filter Effect Application

function processImage(originalImg, contrast = 1.4, vignetteStrength = 0.6, vignetteSpread = 0.5) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;
    
    if (width === 0 || height === 0) {
        // Handle cases where image might not be fully loaded or has invalid dimensions
        console.warn("Image processing skipped: Image dimensions are 0. Ensure the image is loaded correctly.");
        canvas.width = 1; // Create a fallback tiny canvas
        canvas.height = 1;
        return canvas;
    }

    canvas.width = width;
    canvas.height = height;

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

    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    const centerX = width / 2;
    const centerY = height / 2;
    // maxDist is the distance from the center to the farthest corner
    const maxDist = Math.sqrt(centerX * centerX + centerY * centerY);

    // Calculate vignette power based on vignetteSpread
    // vignetteSpread range [0, 1]:
    // 0.0 (sharp) -> power = 2.0
    // 0.5 (medium) -> power = 1.0
    // 1.0 (softest) -> power = 0.02 (effectively very wide falloff)
    const clampedSpread = Math.max(0, Math.min(1, vignetteSpread)); // Ensure spread is [0,1]
    const powerBase = 1.0 - clampedSpread;
    const vignettePower = 2.0 * Math.max(0.01, powerBase); // Ensure power is at least 0.02

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

        // 1. Apply Sepia Tone (Characteristic of old photos like Tintypes)
        // Standard sepia RGB multipliers
        let sr = (r * 0.393) + (g * 0.769) + (b * 0.189);
        let sg = (r * 0.349) + (g * 0.686) + (b * 0.168);
        let sb = (r * 0.272) + (g * 0.534) + (b * 0.131);
        
        // Clamp sepia values to 0-255 range
        r = Math.min(255, sr);
        g = Math.min(255, sg);
        b = Math.min(255, sb);

        // 2. Apply Contrast
        // Formula: new_value = ( (old_value/255 - 0.5) * contrast_factor + 0.5 ) * 255
        // This formula pivots around the mid-gray (127.5)
        r = (((r / 255) - 0.5) * contrast + 0.5) * 255;
        g = (((g / 255) - 0.5) * contrast + 0.5) * 255;
        b = (((b / 255) - 0.5) * contrast + 0.5) * 255;
        
        // Clamp values after contrast adjustment
        r = Math.max(0, Math.min(255, r));
        g = Math.max(0, Math.min(255, g));
        b = Math.max(0, Math.min(255, b));

        // 3. Apply Vignette
        const currentX = (i / 4) % width; // Current pixel's x coordinate
        const currentY = Math.floor((i / 4) / width); // Current pixel's y coordinate
        
        const dx = currentX - centerX;
        const dy = currentY - centerY;
        const dist = Math.sqrt(dx * dx + dy * dy); // Distance of pixel from center
        
        // Normalize distance: 0 at center, 1 at corners.
        // Clamp to max 1.0 to handle potential floating point inaccuracies with maxDist.
        const distNormalized = Math.min(1.0, dist / maxDist); 
        
        // Calculate vignette effect: 0 at center, increases towards edges based on power curve
        // vignetteStrength determines the maximum darkening effect at the very edge.
        const vignetteEffectAmount = vignetteStrength * Math.pow(distNormalized, vignettePower);
        
        // vignetteFactor is the multiplier for pixel brightness (1.0 = no change, 0.0 = black)
        const vignetteFactor = Math.max(0, 1.0 - vignetteEffectAmount); 
        
        r *= vignetteFactor;
        g *= vignetteFactor;
        b *= vignetteFactor;

        // Final assignment to image data.
        // Uint8ClampedArray handles clamping to [0, 255] and truncation of decimals.
        data[i] = r;
        data[i+1] = g;
        data[i+2] = b;
        // Alpha channel (data[i+3]) remains unchanged.
    }

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