Autumn Leaves Image Generator

function processImage(originalImg, leafDensity = 50, applyAutumnTone = 1) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Set canvas dimensions to match the original image
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;
    canvas.width = width;
    canvas.height = height;
    
    const useAutumnTone = Number(applyAutumnTone) === 1;
    
    // Apply warm, autumn-like color filters to the image
    if (useAutumnTone) {
        ctx.filter = 'sepia(0.5) saturate(1.4) hue-rotate(-10deg) brightness(0.95)';
    }
    
    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, width, height);
    
    // Add an orange/brown overlay to enhance the autumn aesthetic
    if (useAutumnTone) {
        ctx.filter = 'none'; // Reset filter
        ctx.save();
        const gradient = ctx.createLinearGradient(0, 0, 0, height);
        gradient.addColorStop(0, 'rgba(255, 140, 0, 0.15)'); // Dark Orange
        gradient.addColorStop(1, 'rgba(139, 69, 19, 0.3)');  // Saddle Brown
        
        ctx.globalCompositeOperation = 'overlay';
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, width, height);
        ctx.restore();
    }
    
    // Draw falling autumn leaves randomly across the image
    ctx.filter = 'none'; // Ensure no filters apply to the leaves themselves
    const numLeaves = Number(leafDensity);
    
    // Using Emojis as our leaf graphic to avoid external assets
    const leaves = ['🍁', '🍂'];
    
    // Size leaves proportionally to the image size
    const minSize = Math.max(15, Math.min(width, height) * 0.03);
    const maxSize = Math.max(30, Math.min(width, height) * 0.12);
    
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // Add a soft drop shadow to the leaves for depth
    ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
    ctx.shadowBlur = maxSize * 0.15;
    ctx.shadowOffsetX = maxSize * 0.05;
    ctx.shadowOffsetY = maxSize * 0.1;
    
    for (let i = 0; i < numLeaves; i++) {
        const leaf = leaves[Math.floor(Math.random() * leaves.length)];
        const x = Math.random() * width;
        const y = Math.random() * height;
        const size = minSize + Math.random() * (maxSize - minSize);
        const rotationAngle = Math.random() * Math.PI * 2;
        
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(rotationAngle);
        ctx.font = `${size}px sans-serif`;
        
        // Optionally blur some leaves to simulate depth of field
        if (Math.random() > 0.8) {
             ctx.filter = `blur(${Math.max(1, size * 0.05)}px)`;
        }
        
        ctx.fillText(leaf, 0, 0);
        ctx.restore();
    }
    
    return canvas;
}