The Walt Disney Company Sound Effects Library

function processImage(originalImg, effectType = "magic") {
    // Create a generic canvas to hold our visually watermarked image
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Set canvas dimensions to match the original image
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0);

    // Calculate dimensions for the overlay banner
    const barHeight = Math.max(60, Math.min(120, canvas.height * 0.2));
    const startY = canvas.height - barHeight;

    // Draw semi-transparent gradient/overlay bar at the bottom
    ctx.fillStyle = 'rgba(0, 0, 0, 0.75)';
    ctx.fillRect(0, startY, canvas.width, barHeight);

    // Configure text styling
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // Header Text
    const headerFontSize = Math.floor(barHeight * 0.35);
    ctx.font = `bold ${headerFontSize}px Arial, sans-serif`;
    ctx.fillStyle = '#FFFFFF';
    ctx.shadowColor = '#000000';
    ctx.shadowBlur = 4;
    ctx.fillText(
        "The Walt Disney Company Sound Effects Library", 
        canvas.width / 2, 
        startY + barHeight * 0.35
    );

    // Subheader Text
    const subFontSize = Math.floor(barHeight * 0.25);
    ctx.font = `italic ${subFontSize}px Arial, sans-serif`;
    ctx.fillStyle = '#f0c040'; // Golden color
    ctx.shadowBlur = 2;
    ctx.fillText(
        "✨ Click the image to play a classic sound effect! 🎵", 
        canvas.width / 2, 
        startY + barHeight * 0.75
    );
    
    // Reset shadow so it doesn't leak out
    ctx.shadowBlur = 0;

    // Add pointer cursor to indicate clickability
    canvas.style.cursor = 'pointer';

    // Interactive Audio Element: Since this tool is for a Sound Effects Library, 
    // clicking the generated image uses the Web Audio API to play a synthesized classic sound.
    canvas.addEventListener('click', () => {
        const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        
        // Browsers block audio unless it happens right on a user interaction
        if (audioCtx.state === 'suspended') {
            audioCtx.resume();
        }

        if (effectType.toLowerCase() === "boing") {
            playCartoonBoing(audioCtx);
        } else {
            playMagicSparkles(audioCtx);
        }
    });

    /**
     * Synthesizes a typical classic cartoon "Boing" or slide whistle sound
     */
    function playCartoonBoing(audioCtx) {
        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        
        osc.connect(gain);
        gain.connect(audioCtx.destination);
        
        osc.type = 'sine';
        
        // Slide frequency up rapidly
        osc.frequency.setValueAtTime(150, audioCtx.currentTime);
        osc.frequency.exponentialRampToValueAtTime(800, audioCtx.currentTime + 0.4);
        
        // Volume envelope
        gain.gain.setValueAtTime(0.8, audioCtx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.4);
        
        osc.start();
        osc.stop(audioCtx.currentTime + 0.4);
    }

    /**
     * Synthesizes a typical classic "Magic Wand Sparkles" sound sequence
     */
    function playMagicSparkles(audioCtx) {
        for (let i = 0; i < 12; i++) {
            const osc = audioCtx.createOscillator();
            const gain = audioCtx.createGain();
            
            osc.connect(gain);
            gain.connect(audioCtx.destination);
            
            osc.type = 'triangle';
            
            const startTime = audioCtx.currentTime + i * 0.06;
            // High pitch arpeggio with slight randomization
            const freq = 1200 + i * 150 + (Math.random() * 200 - 100);
            
            osc.frequency.setValueAtTime(freq, startTime);
            
            // Pluck envelope for each sparkle
            gain.gain.setValueAtTime(0, startTime);
            gain.gain.linearRampToValueAtTime(0.2, startTime + 0.02);
            gain.gain.exponentialRampToValueAtTime(0.01, startTime + 0.15);
            
            osc.start(startTime);
            osc.stop(startTime + 0.15);
        }
    }

    // Return the augmented canvas element
    return canvas;
}