Image Fujifilm Pro 400H Filter Effect Application

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

    // Ensure the canvas has the same dimensions as the image
    // Use naturalWidth/Height for loaded images, fallback to width/height
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

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

    // Get the image data from the canvas
    // Note: getImageData can be slow for very large images, but it's the standard way to manipulate pixels.
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data; // This is a Uint8ClampedArray

    // Iterate over each pixel (each pixel consists of 4 components: R, G, B, A)
    for (let i = 0; i < data.length; i += 4) {
        // Get original pixel values for this iteration
        let r = data[i];
        let g = data[i+1];
        let b = data[i+2];
        // Alpha channel (data[i+3]) is not modified for this filter

        // --- Stage 1: Tone adjustments (Shadows/Highlights based on original luminance) ---
        // Calculate luminance using standard coefficients from the original pixel values
        const lum_orig = 0.2126 * data[i] + 0.7152 * data[i+1] + 0.0722 * data[i+2];

        // Lift shadows: make dark areas a bit brighter
        if (lum_orig < 65) {
            const shadowFactor = (65 - lum_orig) / 65.0; // Factor from 0 (at lum_orig=65) to 1 (at lum_orig=0)
            const liftAmount = 15 * shadowFactor; // Max lift of 15 units in the darkest areas
            r += liftAmount;
            g += liftAmount;
            b += liftAmount;
        }

        // Compress and cool highlights
        if (lum_orig > 180) {
            const highlightFactor = (lum_orig - 180) / (255 - 180); // Factor from 0 (at lum_orig=180) to 1 (at lum_orig=255)
            
            // Highlight compression: slightly reduce brightness of highlights
            // This is applied to the current r,g,b which may have been affected by shadow lift.
            const compressionAmount = 0.1 * highlightFactor; // Max 10% reduction of current value
            r = r * (1 - compressionAmount);
            g = g * (1 - compressionAmount);
            b = b * (1 - compressionAmount);
            
            // THEN, cool these (now compressed) highlights: add blue, reduce red
            b += 18 * highlightFactor; 
            r -= 9 * highlightFactor;  
        }
        
        // Store values after tone adjustments for green-specific logic later
        const r_toned = r;
        const g_toned = g;
        const b_toned = b;

        // --- Stage 2: Color Balance (Overall Cooling and characteristic Pro 400H color shifts) ---
        // This simulates the film's general color response using a simplified matrix-like transformation.
        // Applied to values after tone adjustments.
        const r_bal = r_toned * 0.97 + g_toned * 0.01 + b_toned * 0.02;
        const g_bal = r_toned * 0.01 + g_toned * 0.95 + b_toned * 0.04; // Green contributes slightly more to blue, and is a bit toned down itself
        const b_bal = r_toned * 0.01 + g_toned * 0.02 + b_toned * 1.07; // Blue channel is boosted noticeably for cool tones
        
        r = r_bal;
        g = g_bal;
        b = b_bal;

        // --- Stage 3: Green color modification ---
        // Pro 400H greens are often desaturated and shifted slightly towards cyan or a cooler tone.
        // This logic identifies "greenish" pixels (based on values after tone adjustment but before global color balance)
        // and applies specific adjustments to the current r,g,b values (which have been color balanced).
        if (g_toned > r_toned && g_toned > b_toned && g_toned > 40) { // If green was dominant and not too dark (after tone curve)
            const greenIntensity = Math.max(0, g_toned - (r_toned + b_toned) / 2.0); // How "green" it was, ensuring non-negative
            
            // Desaturate current green value towards the average of current red and blue
            const desatFactorForGreens = 0.35; 
            const rb_avg_current = (r + b) / 2.0; 
            g = g * (1 - desatFactorForGreens) + rb_avg_current * desatFactorForGreens;
            
            // Shift hue slightly towards blue/cyan by adding blue based on original green intensity
            // and slightly reducing red to enhance the cool green effect.
            const blueShiftFromGreen = greenIntensity * 0.15; 
            b += blueShiftFromGreen;
            r -= greenIntensity * 0.05; 
        }

        // --- Stage 4: Final Saturation adjustment ---
        // Pro 400H generally has a rich but not overly electric saturation. A slight global desaturation can help achieve this.
        const avg_chan = (r + g + b) / 3.0; // Calculate average for luminance-preserving desaturation
        const globalDesatFactor = 0.06; // Reduce overall saturation by 6%
        r = avg_chan + (r - avg_chan) * (1.0 - globalDesatFactor);
        g = avg_chan + (g - avg_chan) * (1.0 - globalDesatFactor);
        b = avg_chan + (b - avg_chan) * (1.0 - globalDesatFactor);

        // Clamp values to the 0-255 range to ensure they are valid color components
        data[i]   = Math.max(0, Math.min(255, r));
        data[i+1] = Math.max(0, Math.min(255, g));
        data[i+2] = Math.max(0, Math.min(255, b));
        // data[i+3] (alpha channel) remains unchanged
    }

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

    return canvas;
}