Image Family Effect Adder

function processImage(originalImg, warmth = 60, softGlow = 50, vignette = 60) {
    const canvas = document.createElement('canvas');
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;
    
    if (!width || !height) {
        throw new Error("Invalid image dimensions.");
    }
    
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');
    
    // Parse and constrain parameters (0 to 100 typical range)
    const wVal = isNaN(warmth) ? 60 : Math.max(0, Math.min(100, Number(warmth)));
    const gVal = isNaN(softGlow) ? 50 : Math.max(0, Math.min(100, Number(softGlow)));
    const vVal = isNaN(vignette) ? 60 : Math.max(0, Math.min(100, Number(vignette)));
    
    // "Family Effect": Nostalgic, warm tones, slightly softened contrast
    const sepiaVal = wVal * 0.4;             // Up to 40% sepia for warmth
    const hueRotate = -(wVal * 0.1);         // Push colors slightly towards reds/yellows framing
    const saturateVal = 100 + (wVal * 0.2);  // Richer colors, up to 120%
    const brightVal = 95 + (gVal * 0.15);    // Brightness adjustment
    
    const baseFilter = `brightness(${brightVal}%) contrast(92%) saturate(${saturateVal}%) sepia(${sepiaVal}%) hue-rotate(${hueRotate}deg)`;
    
    // Draw the properly color-graded base layer
    ctx.filter = baseFilter;
    ctx.drawImage(originalImg, 0, 0, width, height);
    
    // Add soft romantic bloom/glow commonly seen in classic family portraits
    if (gVal > 0) {
        ctx.globalCompositeOperation = 'screen';
        ctx.globalAlpha = gVal * 0.004; // Gentle opacity, max 0.4
        
        // Blur relative to the image size for consistent effects
        const blurRadius = Math.max(width, height) * 0.015;
        
        // Apply the blur along with the base color grading to maintain the warm tones
        ctx.filter = `blur(${blurRadius}px) ${baseFilter}`;
        ctx.drawImage(originalImg, 0, 0, width, height);
    }
    
    // Add vignette to softly draw focus towards the center subjects
    if (vVal > 0) {
        ctx.globalCompositeOperation = 'source-over';
        ctx.globalAlpha = 1.0;
        ctx.filter = 'none';
        
        const cx = width / 2;
        const cy = height / 2;
        const maxRadius = Math.sqrt(cx * cx + cy * cy);
        
        // Radial gradient from transparent center to dark, warm brown edges
        const grad = ctx.createRadialGradient(cx, cy, maxRadius * 0.25, cx, cy, maxRadius * 0.95);
        grad.addColorStop(0, 'rgba(30, 15, 0, 0)');
        grad.addColorStop(1, `rgba(30, 15, 0, ${vVal * 0.0085})`); // Max 0.85 opacity
        
        ctx.fillStyle = grad;
        ctx.fillRect(0, 0, width, height);
    }
    
    return canvas;
}