Photo Beauty Power Showcase

/**
 * Applies a "beauty" filter to an image, enhancing colors, contrast, and adding a soft glow and warmth.
 * This function showcases various image enhancement techniques.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {number} softness The intensity of the soft focus/glow effect (0-100). Default is 30.
 * @param {number} saturation The color saturation percentage (0-200). 100 is original. Default is 120.
 * @param {number} contrast The contrast percentage (0-200). 100 is original. Default is 110.
 * @param {number} brightness The brightness percentage (0-200). 100 is original. Default is 105.
 * @param {number} warmth The color temperature adjustment (-100 for cool, 100 for warm). Default is 10.
 * @returns {HTMLCanvasElement} A new canvas element with the processed image.
 */
function processImage(originalImg, softness = 30, saturation = 120, contrast = 110, brightness = 105, warmth = 10) {
    // 1. Create canvas and context
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;
    canvas.width = w;
    canvas.height = h;

    // 2. Clamp and validate parameters to safe ranges
    softness = Math.max(0, Math.min(100, softness));
    saturation = Math.max(0, Math.min(200, saturation));
    contrast = Math.max(0, Math.min(200, contrast));
    brightness = Math.max(0, Math.min(200, brightness));
    warmth = Math.max(-100, Math.min(100, warmth));

    // 3. Apply base color/tone adjustments using canvas filters
    ctx.filter = `saturate(${saturation}%) contrast(${contrast}%) brightness(${brightness}%)`;
    ctx.drawImage(originalImg, 0, 0, w, h);
    
    // Reset filter for next steps, as filters are stateful
    ctx.filter = 'none';

    // 4. Apply softness/glow effect
    if (softness > 0) {
        // We use a temporary canvas to create the blurred layer to avoid read-modify-write issues
        const tempCanvas = document.createElement('canvas');
        const tempCtx = tempCanvas.getContext('2d');
        tempCanvas.width = w;
        tempCanvas.height = h;

        // Draw the already color-corrected image to the temporary canvas
        tempCtx.drawImage(canvas, 0, 0);

        // Now, draw the blurred temporary canvas back onto the main canvas with a "soft-light" blend mode
        const blurAmount = (softness / 100) * 5; // Max blur of 5px
        const glowOpacity = (softness / 100) * 0.35; // Max opacity of 0.35

        ctx.globalAlpha = glowOpacity;
        ctx.globalCompositeOperation = 'soft-light';
        ctx.filter = `blur(${blurAmount}px)`;
        
        ctx.drawImage(tempCanvas, 0, 0, w, h);
        
        // Reset context properties to defaults
        ctx.globalAlpha = 1.0;
        ctx.globalCompositeOperation = 'source-over';
        ctx.filter = 'none';
    }

    // 5. Apply warmth/coolness filter by overlaying a colored layer
    if (warmth !== 0) {
        const warmAlpha = Math.abs(warmth) / 100 * 0.2; // Max alpha of 0.2 for a subtle tint
        ctx.globalCompositeOperation = 'overlay';
        ctx.globalAlpha = warmAlpha;

        if (warmth > 0) {
            // Warm tones (orange/yellow)
            ctx.fillStyle = '#ff9900';
        } else {
            // Cool tones (blue)
            ctx.fillStyle = '#0066ff';
        }
        ctx.fillRect(0, 0, w, h);

        // Reset context properties to defaults
        ctx.globalCompositeOperation = 'source-over';
        ctx.globalAlpha = 1.0;
    }
    
    // 6. Return the final canvas
    return canvas;
}