Photo To Studio Effect Converter

function processImage(originalImg, style = "dramatic", vignetteIntensity = 0.7, spotlightIntensity = 0.5) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;

    const parsedVignette = parseFloat(vignetteIntensity);
    const parsedSpotlight = parseFloat(spotlightIntensity);
    const effectStyle = style.toLowerCase();

    // 1. Fill background to handle transparent PNGs (Mimic Studio Backdrop)
    ctx.fillStyle = (effectStyle === "high-key") ? "#ffffff" : "#1a1a1a";
    ctx.fillRect(0, 0, width, height);

    // 2. Set filters for the "Studio" look (Contrast, Brightness, Saturation)
    let filterStr = "";
    if (effectStyle === "high-key") {
        // Bright, airy, and slightly punchy
        filterStr = "brightness(1.15) contrast(1.1) saturate(1.15)";
    } else if (effectStyle === "low-key") {
        // Dark, moody, high contrast
        filterStr = "brightness(0.85) contrast(1.25) saturate(0.9)";
    } else {
        // Dramatic (default) - strong contrast, slight warmth
        filterStr = "brightness(0.95) contrast(1.3) saturate(0.85) sepia(0.15)";
    }

    // 3. Draw original image with the studio filter applied
    ctx.filter = filterStr;
    ctx.drawImage(originalImg, 0, 0, width, height);
    ctx.filter = "none"; // Reset filter

    const cx = width / 2;
    const cy = height / 2;
    const radius = Math.max(cx, cy);

    // 4. Add Central Spotlight (Mimicking a studio key light or ring light)
    if (parsedSpotlight > 0) {
        const spotlight = ctx.createRadialGradient(cx, cy, 0, cx, cy, radius * 1.2);
        
        if (effectStyle === "high-key") {
            spotlight.addColorStop(0, `rgba(255, 255, 255, ${parsedSpotlight * 0.8})`);
            spotlight.addColorStop(0.5, `rgba(255, 255, 255, ${parsedSpotlight * 0.2})`);
            spotlight.addColorStop(1, "rgba(255, 255, 255, 0)");
            ctx.globalCompositeOperation = "screen";
        } else {
            spotlight.addColorStop(0, `rgba(255, 255, 255, ${parsedSpotlight * 0.5})`);
            spotlight.addColorStop(0.5, `rgba(255, 255, 255, ${parsedSpotlight * 0.1})`);
            spotlight.addColorStop(1, "rgba(0, 0, 0, 0)");
            ctx.globalCompositeOperation = "overlay";
        }
        
        ctx.fillStyle = spotlight;
        ctx.fillRect(0, 0, width, height);
    }

    // 5. Add Vignette (Mimicking studio lighting falloff / backdrop edges)
    if (parsedVignette > 0) {
        const vignette = ctx.createRadialGradient(cx, cy, radius * 0.4, cx, cy, radius * 1.5);
        
        if (effectStyle === "high-key") {
            // White vignette for airy studio effect
            vignette.addColorStop(0, "rgba(255, 255, 255, 0)");
            vignette.addColorStop(0.5, `rgba(255, 255, 255, ${parsedVignette * 0.3})`);
            vignette.addColorStop(1, `rgba(255, 255, 255, ${parsedVignette})`);
            ctx.globalCompositeOperation = "lighten";
        } else {
            // Dark vignette to focus on the center subject
            vignette.addColorStop(0, "rgba(0, 0, 0, 0)");
            vignette.addColorStop(0.5, `rgba(0, 0, 0, ${parsedVignette * 0.5})`);
            vignette.addColorStop(1, `rgba(0, 0, 0, ${parsedVignette})`);
            ctx.globalCompositeOperation = "multiply";
        }

        ctx.fillStyle = vignette;
        ctx.fillRect(0, 0, width, height);
    }

    // 6. Optional Bloom / Soft Focus for High-Key
    if (effectStyle === "high-key") {
        ctx.globalCompositeOperation = "screen";
        ctx.filter = "blur(12px) opacity(0.25)";
        ctx.drawImage(canvas, 0, 0, width, height);
        ctx.filter = "none";
    }

    // Reset settings back to default
    ctx.globalCompositeOperation = "source-over";

    return canvas;
}