Image Cinema Scene Creator

function processImage(originalImg, aspectRatio = 2.35, subtitleText = "Meanwhile, in a parallel universe...", vignetteStrength = 0.6, grainAmount = 0.05, colorFilter = "none", subtitleColor = "#FFFFFF", subtitleFont = "Georgia") {

    // --- 1. Sanitize and validate parameters ---
    const numAspectRatio = Number(aspectRatio) > 0 ? Number(aspectRatio) : 2.35;
    const numVignetteStrength = Math.max(0, Math.min(1, Number(vignetteStrength) || 0));
    const numGrainAmount = Math.max(0, Math.min(1, Number(grainAmount) || 0));

    // --- 2. Setup Canvas ---
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true });
    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;
    canvas.width = w;
    canvas.height = h;

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

    // --- 3. Apply pixel-level effects (Color, Vignette, Grain) ---
    // This is done in a single loop for performance.
    const imageData = ctx.getImageData(0, 0, w, h);
    const pixels = imageData.data;
    const centerX = w / 2;
    const centerY = h / 2;
    // Use the diagonal distance as the maximum to ensure corners are affected
    const maxDist = Math.sqrt(centerX * centerX + centerY * centerY);

    for (let i = 0; i < pixels.length; i += 4) {
        let r = pixels[i];
        let g = pixels[i + 1];
        let b = pixels[i + 2];

        // Apply Color Filter
        if (colorFilter === 'sepia') {
            const tr = 0.393 * r + 0.769 * g + 0.189 * b;
            const tg = 0.349 * r + 0.686 * g + 0.168 * b;
            const tb = 0.272 * r + 0.534 * g + 0.131 * b;
            r = tr; g = tg; b = tb;
        } else if (colorFilter === 'warm') {
            r += 20;
            b -= 20;
        } else if (colorFilter === 'cool') {
            r -= 20;
            b += 20;
        } else if (colorFilter === 'grayscale') {
            const avg = 0.299 * r + 0.587 * g + 0.114 * b;
            r = g = b = avg;
        }

        // Apply Vignette
        if (numVignetteStrength > 0) {
            const y = Math.floor((i / 4) / w);
            const x = (i / 4) % w;
            const dx = centerX - x;
            const dy = centerY - y;
            const dist = Math.sqrt(dx * dx + dy * dy);
            // Use a power function for a more natural falloff
            const darken = Math.pow(dist / maxDist, 1.8) * numVignetteStrength;
            r *= (1.0 - darken);
            g *= (1.0 - darken);
            b *= (1.0 - darken);
        }

        // Apply Film Grain
        if (numGrainAmount > 0) {
            // Scale the noise value to a reasonable range
            const grain = (Math.random() - 0.5) * numGrainAmount * 128;
            r += grain;
            g += grain;
            b += grain;
        }

        // Clamp values to the 0-255 range
        pixels[i] = Math.max(0, Math.min(255, r));
        pixels[i + 1] = Math.max(0, Math.min(255, g));
        pixels[i + 2] = Math.max(0, Math.min(255, b));
    }
    // Write the modified pixels back to the canvas
    ctx.putImageData(imageData, 0, 0);

    // --- 4. Draw Letterbox Bars and Subtitle ---
    // Calculate the height of the visible image area based on the aspect ratio
    const imageAreaHeight = w / numAspectRatio;

    // Only add bars if the new aspect ratio is wider than the original
    if (imageAreaHeight < h) {
        const barHeight = (h - imageAreaHeight) / 2;
        ctx.fillStyle = 'black';
        // Top bar
        ctx.fillRect(0, 0, w, barHeight);
        // Bottom bar
        ctx.fillRect(0, h - barHeight, w, barHeight);

        // Draw Subtitle (only if bars exist and text is provided)
        if (subtitleText && subtitleText.trim() !== "") {
            // Set font size relative to bar height, with a minimum size
            const fontSize = Math.max(12, barHeight * 0.6);
            ctx.font = `bold ${fontSize}px "${subtitleFont}", sans-serif`;
            ctx.fillStyle = subtitleColor;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            
            // Add a subtle shadow for readability
            ctx.shadowColor = 'rgba(0, 0, 0, 0.8)';
            ctx.shadowBlur = 5;
            ctx.shadowOffsetX = 1;
            ctx.shadowOffsetY = 1;

            const subX = w / 2;
            const subY = h - barHeight / 2;
            
            ctx.fillText(subtitleText, subX, subY);
        }
    }

    // --- 5. Return the final canvas ---
    return canvas;
}