Cinematic Beach Sunset Photo Of A Couple With Studio Quality

/**
 * Applies a cinematic beach sunset filter to an image to simulate a studio-quality photo effect.
 * This function manipulates color, contrast, and lighting to create a warm, cinematic feel.
 * It can also add optional letterboxing for a widescreen look.
 *
 * @param {Image} originalImg The original input Image object. The image must be fully loaded.
 * @param {number} intensity A number between 0 and 1 representing the overall strength of the effect. Default is 0.8.
 * @param {number} warmth A number between 0 and 100 to control the sunset color temperature. Default is 75.
 * @param {number} contrast A number between 0 and 100 for the cinematic contrast level. Default is 50.
 * @param {number} brightness A number between 0 and 100 to adjust the image brightness. Default is 10.
 * @param {number} softness A number between 0 and 10 for the soft-focus effect, in pixels of blur. Default is 0.5.
 * @param {number} letterbox A number indicating whether to add cinematic bars (1 for yes, 0 for no). Default is 1.
 * @param {string} letterboxRatioStr A string for the target aspect ratio, e.g., '2.35:1'. Default is '2.35:1'.
 * @returns {HTMLCanvasElement} A new canvas element with the cinematic effect applied.
 */
function processImage(originalImg, intensity = 0.8, warmth = 75, contrast = 50, brightness = 10, softness = 0.5, letterbox = 1, letterboxRatioStr = '2.35:1') {
    // Create a canvas with the same dimensions as the original image
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;
    canvas.width = w;
    canvas.height = h;

    // --- Build the CSS filter string from parameters ---

    // Clamp parameters to their expected ranges for safety
    const safeIntensity = Math.max(0, Math.min(1, intensity));
    const safeWarmth = Math.max(0, Math.min(100, warmth));
    const safeContrast = Math.max(0, Math.min(100, contrast));
    const safeBrightness = Math.max(0, Math.min(100, brightness));
    const safeSoftness = Math.max(0, Math.min(10, softness));

    // Convert user-friendly 0-100 parameters to CSS filter values
    const sepiaVal = safeWarmth / 200; // Range: 0 to 0.5
    const saturateVal = 1 + (safeWarmth / 150); // Range: 1 to ~1.67
    const contrastVal = 1 + (safeContrast / 100); // Range: 1 to 2
    const brightnessVal = 1 + (safeBrightness / 200); // Range: 1 to 1.5

    const filterString = `sepia(${sepiaVal}) saturate(${saturateVal}) contrast(${contrastVal}) brightness(${brightnessVal}) blur(${safeSoftness}px)`;

    // --- Apply the effect ---

    // 1. Draw the original, unfiltered image as the base layer
    ctx.drawImage(originalImg, 0, 0, w, h);

    // 2. Overlay the filtered image with transparency based on 'intensity'
    // This blends the original and filtered versions together.
    if (safeIntensity > 0) {
        ctx.globalAlpha = safeIntensity;
        ctx.filter = filterString;
        ctx.drawImage(originalImg, 0, 0, w, h);
    }

    // 3. Reset context properties for subsequent drawing operations
    ctx.globalAlpha = 1.0;
    ctx.filter = 'none';

    // 4. Add letterbox bars on top of the final image if enabled
    if (letterbox === 1) {
        const ratioParts = letterboxRatioStr.split(':').map(Number);
        if (ratioParts.length === 2 && !isNaN(ratioParts[0]) && !isNaN(ratioParts[1]) && ratioParts[1] !== 0) {
            const targetRatio = ratioParts[0] / ratioParts[1];
            const originalRatio = w / h;

            ctx.fillStyle = 'black';

            if (originalRatio < targetRatio) {
                // Add letterbox bars (top and bottom)
                const newHeight = w / targetRatio;
                const barHeight = (h - newHeight) / 2;
                ctx.fillRect(0, 0, w, barHeight);
                ctx.fillRect(0, h - barHeight, w, barHeight);
            } else if (originalRatio > targetRatio) {
                // Add pillarbox bars (left and right)
                const newWidth = h * targetRatio;
                const barWidth = (w - newWidth) / 2;
                ctx.fillRect(0, 0, barWidth, h);
                ctx.fillRect(w - barWidth, 0, barWidth, h);
            }
        }
    }

    // Return the final canvas
    return canvas;
}