Image Technicolor 3-Strip Process Filter Effect

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

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

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

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

    // Get the ImageData object
    // Handle cases where canvas might be 0x0 (e.g., if image failed to load or has no dimensions)
    if (width === 0 || height === 0) {
        return canvas; // Return empty canvas
    }
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // Technicolor 3-Strip Process (Process 4) Approximate Color Matrix
    // These coefficients are derived from various sources attempting to emulate
    // the look of Technicolor Process 4 films.
    const matrix = [
        [0.50430, 0.38310, 0.07230], // Transformation for the Red channel
        [0.20500, 0.75000, 0.04500], // Transformation for the Green channel
        [0.04100, 0.14000, 0.81900]  // Transformation for the Blue channel
    ];

    // Iterate through each pixel (each pixel has 4 components: R, G, B, A)
    for (let i = 0; i < data.length; i += 4) {
        const r_original = data[i];
        const g_original = data[i+1];
        const b_original = data[i+2];
        // Alpha channel (data[i+3]) is preserved

        // Apply the color matrix transformation
        let r_new = r_original * matrix[0][0] + g_original * matrix[0][1] + b_original * matrix[0][2];
        let g_new = r_original * matrix[1][0] + g_original * matrix[1][1] + b_original * matrix[1][2];
        let b_new = r_original * matrix[2][0] + g_original * matrix[2][1] + b_original * matrix[2][2];

        // Clamp values to the valid range [0, 255] and round them
        data[i]   = Math.max(0, Math.min(255, Math.round(r_new)));
        data[i+1] = Math.max(0, Math.min(255, Math.round(g_new)));
        data[i+2] = Math.max(0, Math.min(255, Math.round(b_new)));
    }

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

    // Return the canvas with the Technicolor effect
    return canvas;
}