Forest Walk Image Tool

function processImage(originalImg, intensity = 50, glow = 10) {
    // Parse parameters to ensure they are valid numbers
    intensity = Number(intensity);
    if (isNaN(intensity)) intensity = 50;
    glow = Number(glow);
    if (isNaN(glow)) glow = 10;

    const width = originalImg.width;
    const height = originalImg.height;

    // Create the main canvas
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // Return an empty canvas if the original image has no dimensions
    if (width === 0 || height === 0) return canvas;

    // Draw the original image as the base
    ctx.drawImage(originalImg, 0, 0);

    // Filter properties
    const strength = Math.max(0, Math.min(100, intensity)) / 100;

    if (strength > 0) {
        // 1. Contrast bump (overlay the image onto itself)
        ctx.globalCompositeOperation = 'overlay';
        ctx.globalAlpha = 0.15 * strength;
        ctx.drawImage(originalImg, 0, 0);

        // 2. Warm sunlight overlay (adds a dreamy sunny afternoon vibe)
        ctx.globalCompositeOperation = 'soft-light';
        ctx.fillStyle = '#ffdf80'; // warm golden yellow
        ctx.globalAlpha = 0.35 * strength;
        ctx.fillRect(0, 0, width, height);

        // 3. Deep forest green tint (enhances natural greens)
        ctx.fillStyle = '#1e3f20'; // deep lush green
        ctx.globalAlpha = 0.4 * strength;
        ctx.fillRect(0, 0, width, height);

        // 4. Forest vignette (draws focus to the center, darkens edges with a green hue)
        ctx.globalCompositeOperation = 'multiply';
        ctx.globalAlpha = 0.7 * strength;
        const cx = width / 2;
        const cy = height / 2;
        const radius = Math.max(width, height) / 2;
        
        const gradient = ctx.createRadialGradient(cx, cy, radius * 0.4, cx, cy, radius * 1.5);
        gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
        gradient.addColorStop(1, 'rgba(5, 20, 5, 0.8)'); // Dark greenish-black vignette
        
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, width, height);
        
        // Reset context state
        ctx.globalAlpha = 1.0;
        ctx.globalCompositeOperation = 'source-over';
    }

    const glowStrength = Math.max(0, Math.min(100, glow));
    
    // Apply "Orton Effect" for a misty/fairy-tale forest glow
    if (glowStrength > 0) {
        // Calculate a dynamic blur radius proportional to image size for consistent results
        const minDim = Math.min(width, height);
        const blurRadius = Math.max(1, (minDim * 0.01) * (glowStrength / 10));

        // Create an offscreen canvas to hold the current graded image
        const offscreen = document.createElement('canvas');
        offscreen.width = width;
        offscreen.height = height;
        const offCtx = offscreen.getContext('2d');
        offCtx.drawImage(canvas, 0, 0);

        // Screen layer: Adds a soft, bright glowing diffusion
        ctx.globalCompositeOperation = 'screen';
        ctx.filter = `blur(${blurRadius}px)`;
        ctx.globalAlpha = 0.3 * (glowStrength / 10);
        ctx.drawImage(offscreen, 0, 0);

        // Multiply layer: Restores local contrast and deepens the misty shadows
        ctx.globalCompositeOperation = 'multiply';
        ctx.globalAlpha = 0.2 * (glowStrength / 10);
        ctx.drawImage(offscreen, 0, 0);

        // Reset context state
        ctx.filter = 'none';
        ctx.globalAlpha = 1.0;
        ctx.globalCompositeOperation = 'source-over';
    }

    return canvas;
}