Image Cross-Processed Slide Film Filter Effect Application

function processImage(originalImg) {
    const canvas = document.createElement('canvas');
    // Ensure originalImg is loaded for width/height to be correct.
    // For HTMLImageElement, .width and .height might be 0 if not loaded.
    // The problem implies originalImg is a ready-to-use JavaScript Image object.
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;

    // Use { willReadFrequently: true } for potential performance optimization if available.
    const ctx = canvas.getContext('2d', { willReadFrequently: true });
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // Helper function for linear interpolation between two points (x0,y0) and (x1,y1)
    function interpolate(x, x0, y0, x1, y1) {
        // Ensure x0 <= x <= x1.
        // Curve points are sorted by x, so x0 < x1 for segments.
        if (x0 === x1) return y0; // Avoid division by zero if points somehow coincide on x
        return y0 + (y1 - y0) * (x - x0) / (x1 - x0);
    }

    // Helper function to apply a curve defined by points to a channel value
    function applyChannelCurve(value, curvePoints) {
        // curvePoints is an array of [inputVal, outputVal] pairs, sorted by inputVal.
        // e.g., [[0,0], [128,180], [255,255]]

        if (!curvePoints || curvePoints.length === 0) {
            return value; // Return original value if no curve is defined
        }

        // Handle cases where value is outside the curve's defined input range
        if (value <= curvePoints[0][0]) {
            return curvePoints[0][1];
        }
        const lastPointIndex = curvePoints.length - 1;
        if (value >= curvePoints[lastPointIndex][0]) {
            return curvePoints[lastPointIndex][1];
        }

        // Find the segment for interpolation
        // Curve points are assumed to be sorted by their x-values (inputVal).
        for (let i = 0; i < lastPointIndex; i++) {
            const p0 = curvePoints[i];     // Current point [x0, y0]
            const p1 = curvePoints[i + 1]; // Next point    [x1, y1]

            if (value >= p0[0] && value <= p1[0]) {
                // Value is within this segment [p0[0], p1[0]]
                return interpolate(value, p0[0], p0[1], p1[0], p1[1]);
            }
        }
        
        // Fallback: This should ideally not be reached if curvePoints span 0-255
        // or if the initial boundary checks handle the value.
        // If value is within the min/max x of the curve but not in any segment,
        // it might indicate unsorted or malformed curvePoints.
        // For safety, return the output of the last point.
        return curvePoints[lastPointIndex][1]; 
    }

    // Define curves for a "Cross-processed Slide Film" (XPro-like) effect.
    // These specific curves are inspired by popular digital cross-processing filters
    // that aim to emulate the E-6 slide film processed in C-41 chemicals effect.
    // Points are [input_channel_value, output_channel_value], range 0-255.
    const redChannelCurve =   [ [0,0], [55,48], [115,100], [160,155], [215,220], [255,255] ];
    const greenChannelCurve = [ [0,0], [50,52], [100,105], [150,165], [200,215], [255,240] ];
    const blueChannelCurve =  [ [0,20], [60,50], [115,100], [170,150], [215,205], [255,230] ];

    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];   // Original red value
        let g = data[i+1]; // Original green value
        let b = data[i+2]; // Original blue value

        // Apply the respective curve to each color channel
        r = applyChannelCurve(r, redChannelCurve);
        g = applyChannelCurve(g, greenChannelCurve);
        b = applyChannelCurve(b, blueChannelCurve);

        // Assign the modified values back to the image data.
        // Pixel data must be integers in the range [0, 255].
        data[i]   = Math.round(Math.max(0, Math.min(255, r)));
        data[i+1] = Math.round(Math.max(0, Math.min(255, g)));
        data[i+2] = Math.round(Math.max(0, Math.min(255, b)));
        // Alpha channel (data[i+3]) is left unchanged for this filter.
    }

    ctx.putImageData(imageData, 0, 0);
    return canvas;
}