Image Agfa Vista Filter Effect Application

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

    // Ensure canvas dimensions match the original image dimensions
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

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

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

    // Coefficients for Agfa Vista-like color transformation
    // These are approximations based on common characteristics of Agfa Vista film:
    // - Punchy, warm reds (often leaning slightly orange)
    // - Vivid greens (can be slightly yellowish or olive)
    // - Muted or cyan-shifted blues
    // - Increased contrast
    
    // Color matrix coefficients [row-major order for R', G', B']
    // R' = m11*R + m12*G + m13*B
    // G' = m21*R + m22*G + m23*B
    // B' = m31*R + m32*G + m33*B
    const m11 = 1.20, m12 = 0.10, m13 = -0.10; // Red channel: boost R, add G for warmth, reduce B influence
    const m21 = 0.00, m22 = 1.15, m23 = 0.05; // Green channel: boost G, slight B influence for depth/coolness in greens
    const m31 = 0.10, m32 = 0.20, m33 = 0.70; // Blue channel: reduce B self-contribution, add R&G to shift/desaturate

    const contrastFactor = 1.15; // Increase contrast by 15%

    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];

        // 1. Apply color matrix transformation
        let nr = r * m11 + g * m12 + b * m13;
        let ng = r * m21 + g * m22 + b * m23;
        let nb = r * m31 + g * m32 + b * m33;

        // 2. Apply contrast
        // Formula: NewValue = (OldValue - 128) * Factor + 128
        nr = (nr - 128) * contrastFactor + 128;
        ng = (ng - 128) * contrastFactor + 128;
        nb = (nb - 128) * contrastFactor + 128;

        // 3. Clamp values to the 0-255 range and round them
        data[i]     = Math.max(0, Math.min(255, Math.round(nr)));
        data[i + 1] = Math.max(0, Math.min(255, Math.round(ng)));
        data[i + 2] = Math.max(0, Math.min(255, Math.round(nb)));
        // Alpha channel (data[i + 3]) remains unchanged
    }

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

    return canvas;
}