Image Lee 80A Cooling Filter Effect Application

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

    // Ensure the original image has valid dimensions
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    if (width === 0 || height === 0) {
        // Return an empty canvas or throw an error if image is invalid/not loaded
        console.error("Image has zero dimensions. Is it loaded correctly?");
        canvas.width = 0;
        canvas.height = 0;
        return canvas;
    }

    canvas.width = width;
    canvas.height = height;

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

    // Get the ImageData object
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data; // data is a Uint8ClampedArray: [R, G, B, A, R, G, B, A, ...]

    // Lee 80A filter RGB multipliers
    // This filter is used to convert light from 3200K (tungsten) to 5500K (daylight).
    // It strongly reduces red, moderately reduces green, and slightly boosts or maintains blue.
    // This creates a "cooling" effect.
    const rFactor = 0.55; // Significantly reduce red
    const gFactor = 0.80; // Moderately reduce green
    const bFactor = 1.15; // Slightly boost blue (or 1.0 to maintain blue if preferred)

    for (let i = 0; i < data.length; i += 4) {
        // Get original pixel values
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];
        // Alpha channel (data[i + 3]) is unchanged

        // Apply filter transformation
        let newR = r * rFactor;
        let newG = g * gFactor;
        let newB = b * bFactor;

        // Assign new values. Uint8ClampedArray will automatically clamp values
        // to the 0-255 range and round them.
        data[i] = newR;     // Red channel
        data[i + 1] = newG; // Green channel
        data[i + 2] = newB; // Blue channel
    }

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

    return canvas;
}