Photo Fujifilm Klasse W Filter Effect Application

function processImage(originalImg, contrast = 1.1, saturation = 0.95, temperature = -5, greenShift = 0.08, blueBoost = 0.04) {
    const canvas = document.createElement('canvas');
    // Using { willReadFrequently: true } can be an optimization hint for the browser
    // if you're doing many readbacks (getImageData).
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // Ensure using intrinsic dimensions of the image
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    canvas.width = imgWidth;
    canvas.height = imgHeight;

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

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

    for (let i = 0; i < data.length; i += 4) {
        // Get current pixel's RGB values
        // These are initially in the 0-255 range.
        // Calculations below are floating point and might go out of this range temporarily.
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];

        // 1. Apply Contrast
        // Adjusts the difference from mid-gray (128).
        // Values > 1 increase contrast, < 1 decrease it.
        r = (r - 128) * contrast + 128;
        g = (g - 128) * contrast + 128;
        b = (b - 128) * contrast + 128;

        // 2. Apply Saturation
        // lum = perceived brightness (weighted average of R, G, B)
        // The weights are standard for converting RGB to Luminance (Y in YIQ/YUV).
        const lum = 0.299 * r + 0.587 * g + 0.114 * b;
        // Lerp (linear interpolation) between grayscale (lum) and the color based on saturation factor.
        // saturation = 0 gives grayscale, 1 gives original color, > 1 increases saturation.
        r = lum + (r - lum) * saturation;
        g = lum + (g - lum) * saturation;
        b = lum + (b - lum) * saturation;
        
        // 3. Apply Temperature
        // Positive temperature values make the image warmer (more red/yellow, less blue).
        // Negative temperature values make the image cooler (more blue, less red/yellow).
        // temperature is scaled by /100.0 to get a percentage factor.
        const tempFactor = Math.abs(temperature) / 100.0; 
        if (temperature > 0) { // Warmer: increase Red, decrease Blue
            r *= (1 + tempFactor);
            b *= (1 - tempFactor);
        } else if (temperature < 0) { // Cooler: increase Blue, decrease Red
            b *= (1 + tempFactor);
            r *= (1 - tempFactor);
        }
        // If temperature is 0, no change in this step.
        // Green channel is typically not directly affected by basic temperature adjustments.

        // 4. Fujifilm Klasse W specific color adjustments
        // These are aesthetic choices to emulate some common Fujifilm characteristics.
        
        // Slight general red suppression, common in some cooler film looks.
        let final_r = r * 0.98; 
        
        // Boost green slightly and add blue channel influence. This shifts greens towards cyan/teal.
        // greenShift (default 0.08) controls the strength of blue influence.
        let final_g = g * 1.02 + b * greenShift; 
        
        // Boost blue channel and add a hint of green. This aims for Fuji's characteristic rich, slightly cyan-tinted blues.
        // blueBoost (default 0.04) controls the main blue enhancement.
        // The g * (blueBoost * 0.2) part adds a small amount of green influence to blue.
        let final_b = b * (1.0 + blueBoost) + g * (blueBoost * 0.2);

        // Final Clamp: Ensure all R, G, B values are within the valid 0-255 range.
        data[i] = Math.max(0, Math.min(255, final_r));
        data[i + 1] = Math.max(0, Math.min(255, final_g));
        data[i + 2] = Math.max(0, Math.min(255, final_b));
        // Alpha channel (data[i+3]) remains unchanged.
    }

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

    return canvas;
}