Detailed Dreamworks Image Variant Generator

function processImage(originalImg, bloomAmount = 0.35, saturationBoost = 1.3, sharpness = 0.5, styleIntensity = 0.7, warmth = 1.1) {
    const width = originalImg.width;
    const height = originalImg.height;

    // Create the main canvas
    const mainCanvas = document.createElement('canvas');
    mainCanvas.width = width;
    mainCanvas.height = height;
    const ctx = mainCanvas.getContext('2d');

    // Step 1: Base enhancement
    // Boost saturation and overall contrast/brightness using Canvas filters to mimic vivid 3D animation colors
    ctx.filter = `saturate(${saturationBoost * 100}%) contrast(110%) brightness(105%)`;
    ctx.drawImage(originalImg, 0, 0);

    // Step 2: "Dreamworks" Subsurface Scattering (SSS) & Skin Smoothing Simulation
    // Overlays a slightly blurred, warm-tinted version of the image to smooth micro-details and mimic SSS
    const sssCanvas = document.createElement('canvas');
    sssCanvas.width = width;
    sssCanvas.height = height;
    const sssCtx = sssCanvas.getContext('2d');

    // Small blur for smoothing surfaces
    sssCtx.filter = `blur(${Math.max(width, height) * 0.005}px) saturate(150%)`;
    sssCtx.drawImage(mainCanvas, 0, 0);

    // Tint it warm (light peach/orange)
    sssCtx.globalCompositeOperation = 'multiply';
    sssCtx.fillStyle = 'rgba(255, 200, 150, 0.4)'; 
    sssCtx.fillRect(0, 0, width, height);

    // Blend back onto the main canvas
    ctx.filter = 'none';
    ctx.globalCompositeOperation = 'overlay';
    ctx.globalAlpha = styleIntensity * 0.6;
    ctx.drawImage(sssCanvas, 0, 0);

    // Step 3: Magical Bloom / Cinematic Lighting
    // Creates that signature diffuse light spread seen in 3D animated films
    const bloomCanvas = document.createElement('canvas');
    bloomCanvas.width = width;
    bloomCanvas.height = height;
    const bloomCtx = bloomCanvas.getContext('2d');

    // Large blur for glowing light
    bloomCtx.filter = `blur(${Math.max(width, height) * 0.03}px) brightness(120%)`;
    bloomCtx.drawImage(mainCanvas, 0, 0);

    // Screen blend mode to cast light effects
    ctx.globalCompositeOperation = 'screen';
    ctx.globalAlpha = bloomAmount;
    ctx.drawImage(bloomCanvas, 0, 0);

    // Reset properties for pixel manipulation
    ctx.globalAlpha = 1.0;
    ctx.globalCompositeOperation = 'source-over';

    // Step 4: Pixel-Level Cinematic Color Grading & Sharpening
    const imgData = ctx.getImageData(0, 0, width, height);
    const sData = imgData.data;
    const dstData = new ImageData(width, height);
    const dData = dstData.data;

    // Apply color grading in-place on source data
    for (let i = 0; i < sData.length; i += 4) {
        let r = sData[i];
        let g = sData[i + 1];
        let b = sData[i + 2];

        // Calculate luminance
        let luma = 0.299 * r + 0.587 * g + 0.114 * b;

        if (luma < 128) {
            // Lift and cool down the shadows for cinematic depth
            b += (128 - luma) * 0.15;
            r -= (128 - luma) * 0.05;
        } else {
            // Warm the highlights for a magical/golden hour feel
            r += (luma - 128) * 0.1 * warmth;
            g += (luma - 128) * 0.05 * warmth;
        }

        sData[i] = Math.min(255, Math.max(0, r));
        sData[i + 1] = Math.min(255, Math.max(0, g));
        sData[i + 2] = Math.min(255, Math.max(0, b));
        
        // Copy exact pixels over to destination array first
        dData[i] = sData[i];
        dData[i + 1] = sData[i + 1];
        dData[i + 2] = sData[i + 2];
        dData[i + 3] = sData[i + 3];
    }

    // Apply Sharpening to bring back "Detailed" crispness to edges post-smoothing
    if (sharpness > 0) {
        const w = width;
        const h = height;
        for (let y = 1; y < h - 1; y++) {
            for (let x = 1; x < w - 1; x++) {
                const i = (y * w + x) * 4;
                for (let c = 0; c < 3; c++) {
                    // Standard 3x3 sharpening kernel
                    const sharpened =
                        5 * sData[i + c] -
                        sData[i - w * 4 + c] -     // top
                        sData[i + w * 4 + c] -     // bottom
                        sData[i - 4 + c] -         // left
                        sData[i + 4 + c];          // right

                    // Blend original and sharpened based on sharpness magnitude
                    dData[i + c] = Math.min(255, Math.max(0, sData[i + c] * (1 - sharpness) + sharpened * sharpness));
                }
            }
        }
    }

    // Write processed pixels back to canvas
    ctx.putImageData(dstData, 0, 0);

    // Step 5: Cinematic Vignette (Dark Edges)
    const grad = ctx.createRadialGradient(
        width / 2, height / 2, Math.max(width, height) * 0.35,
        width / 2, height / 2, Math.max(width, height) * 0.75
    );
    grad.addColorStop(0, 'rgba(0,0,0,0)');
    grad.addColorStop(0.7, 'rgba(5, 10, 20, 0.3)'); // Subtly cold dark edges
    grad.addColorStop(1, 'rgba(5, 10, 20, 0.7)');

    ctx.globalCompositeOperation = 'multiply';
    ctx.fillStyle = grad;
    ctx.fillRect(0, 0, width, height);

    return mainCanvas;
}