Image Kodak Portra 400 Film Filter Effect

function processImage(originalImg) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;
    canvas.width = width;
    canvas.height = height;

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

    // Get image data to manipulate pixels
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // Constants for targeting the Kodak Portra 400 "look"
    // These values are chosen to approximate the film's characteristics:
    // - Warm overall tone
    // - Good skin tones (achieved by general warmth and careful green/red balance)
    // - Slightly lifted blacks/shadows
    // - Muted greens, often shifting towards olive/yellow
    // - Cyan-ish blues/skies
    // - Soft highlight roll-off
    // - Medium contrast, not overly punchy saturation

    const LIFT_BLACKS = 8;          // Increases brightness of the darkest areas
    const BRIGHTNESS_BOOST = 5;     // Overall brightness increase

    const WARMTH_R_MULT = 1.06;     // Multiplier for Red channel (adds warmth)
    const WARMTH_G_MULT = 1.03;     // Multiplier for Green channel (adds warmth, less than red)
    const WARMTH_B_MULT = 0.97;     // Multiplier for Blue channel (reduces blue to enhance warmth)

    // Green color adjustments
    const GREEN_DOMINANCE_FACTOR = 1.05; // How much G must dominate R & B to be considered "strong green"
    const GREEN_REDUCTION = 0.94;        // Reduction factor for strong greens (mutes them)
    const GREEN_TO_OLIVE_R_BOOST = 1.04; // Boosts red in green areas to shift towards olive/yellow

    // Blue color adjustments
    const BLUE_DOMINANCE_FACTOR = 1.05; // How much B must dominate R & G for "strong blue"
    const BLUE_TO_CYAN_G_BOOST = 1.03;  // Boosts green in blue areas to shift towards cyan
    const BLUE_REDUCTION = 0.96;        // Reduction factor for strong blues

    // Shadow tint adjustments
    const SHADOW_LUMA_THRESHOLD = 70;    // Luminance below which shadow tint applies
    const SHADOW_TINT_B_MULT = 1.05;     // Blue channel multiplier in shadows (cools shadows)
    const SHADOW_TINT_R_MULT = 0.98;     // Red channel multiplier in shadows (enhances cool effect)

    // Saturation adjustment
    const OVERALL_DESATURATION_MIX = 0.08; // Mix factor with grayscale: 0=no change, 1=grayscale

    // Highlight compression
    const HIGHLIGHT_THRESHOLD = 195;         // Pixels brighter than this are compressed
    const HIGHLIGHT_COMPRESSION_FACTOR = 0.85; // Strength of compression (lower = more compression)

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

        // 1. Lift blacks and adjust overall brightness
        r = r + LIFT_BLACKS + BRIGHTNESS_BOOST;
        g = g + LIFT_BLACKS + BRIGHTNESS_BOOST;
        b = b + LIFT_BLACKS + BRIGHTNESS_BOOST;
        
        // 2. Apply overall warmth
        r *= WARMTH_R_MULT;
        g *= WARMTH_G_MULT;
        b *= WARMTH_B_MULT;

        // 3. Adjust strong greens (shift towards olive/yellow, mute slightly)
        if (g > r * GREEN_DOMINANCE_FACTOR && g > b * GREEN_DOMINANCE_FACTOR) {
            g *= GREEN_REDUCTION;
            r *= GREEN_TO_OLIVE_R_BOOST;
        }
        
        // 4. Adjust strong blues (shift towards cyan)
        if (b > r * BLUE_DOMINANCE_FACTOR && b > g * BLUE_DOMINANCE_FACTOR) {
            g *= BLUE_TO_CYAN_G_BOOST;
            b *= BLUE_REDUCTION;
        }

        // 5. Apply cool/cyan tint to deep shadows
        // Calculate luminance based on current r,g,b values (after warmth and color shifts)
        const currentLuma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // perceptual luma
        if (currentLuma < SHADOW_LUMA_THRESHOLD) {
            b *= SHADOW_TINT_B_MULT;
            r *= SHADOW_TINT_R_MULT;
        }

        // 6. Apply overall slight desaturation
        const avg = (r + g + b) / 3;
        r = r * (1 - OVERALL_DESATURATION_MIX) + avg * OVERALL_DESATURATION_MIX;
        g = g * (1 - OVERALL_DESATURATION_MIX) + avg * OVERALL_DESATURATION_MIX;
        b = b * (1 - OVERALL_DESATURATION_MIX) + avg * OVERALL_DESATURATION_MIX;
        
        // 7. Apply highlight compression for softer highlights
        if (r > HIGHLIGHT_THRESHOLD) {
            r = HIGHLIGHT_THRESHOLD + (r - HIGHLIGHT_THRESHOLD) * HIGHLIGHT_COMPRESSION_FACTOR;
        }
        if (g > HIGHLIGHT_THRESHOLD) {
            g = HIGHLIGHT_THRESHOLD + (g - HIGHLIGHT_THRESHOLD) * HIGHLIGHT_COMPRESSION_FACTOR;
        }
        if (b > HIGHLIGHT_THRESHOLD) {
            b = HIGHLIGHT_THRESHOLD + (b - HIGHLIGHT_THRESHOLD) * HIGHLIGHT_COMPRESSION_FACTOR;
        }

        // Clamp values to the 0-255 range and round them
        data[i] = Math.max(0, Math.min(255, Math.round(r)));
        data[i + 1] = Math.max(0, Math.min(255, Math.round(g)));
        data[i + 2] = Math.max(0, Math.min(255, Math.round(b)));
        // Alpha channel (data[i + 3]) remains unchanged
    }

    // Put the modified image data back onto the canvas
    ctx.putImageData(imageData, 0, 0);

    return canvas;
}