Image Bronica ETRS Medium Format Filter Effect Application

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

    // Ensure originalImg dimensions are available
    // Use naturalWidth/Height for intrinsic dimensions, fallback to width/height
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    if (imgWidth === 0 || imgHeight === 0) {
        // Handle cases where image might not be loaded or has no dimensions
        console.error("Image has zero dimensions. Cannot process.");
        // Create a tiny empty canvas or handle as an error
        canvas.width = 1;
        canvas.height = 1;
        return canvas;
    }

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

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

    // Get image data for manipulation
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        // This can happen due to cross-origin issues if the image source is tainted
        console.error("Could not get image data. If the image is from another domain, ensure CORS is handled or the image is served with appropriate headers.", e);
        // In case of error, return the canvas with the original image drawn (as a fallback)
        return canvas;
    }
    
    const data = imageData.data;
    const width = canvas.width;
    const height = canvas.height;

    // --- Bronica ETRS Medium Format Filter Effect Parameters ---
    // These values are chosen to emulate a slightly warm, rich, film-like quality
    // often associated with medium format photography, with subtle imperfections.
    const desaturationAmount = 0.15;  // (0 to 1) Slight desaturation for a filmic look
    const warmthFactorRed = 1.04;     // Multiplier for red channel
    const warmthFactorGreen = 1.02;   // Multiplier for green channel
    const warmthFactorBlue = 0.96;    // Multiplier for blue channel (reduces blue, adds warmth)
    const contrastValue = 15;         // (-255 to 255) Positive increases contrast. Range: e.g., 10-30 for subtle.
    const brightnessValue = 8;        // (-255 to 255) Positive brightens. Range: e.g., 5-15 for subtle lift.
    const vignetteStrength = 0.4;     // (0 to 1) Strength of the vignette.
    const vignetteSoftness = 0.5;     // (0 to 1) How soft the vignette edges are.
                                      // 0.5 means effect starts ramping up from 50% of distance to edge/corner.
    const grainAmount = 10;           // (0 to e.g., 30) Intensity of film grain. Keep subtle for "medium format".

    const centerX = width / 2;
    const centerY = height / 2;
    // Max distance from center to a corner of the image
    const maxDist = Math.sqrt(centerX * centerX + centerY * centerY);

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

        // 1. Desaturation
        if (desaturationAmount > 0) {
            // Standard luminance calculation: L = 0.299*R + 0.587*G + 0.114*B
            const gray = 0.299 * r + 0.587 * g + 0.114 * b;
            r = r * (1 - desaturationAmount) + gray * desaturationAmount;
            g = g * (1 - desaturationAmount) + gray * desaturationAmount;
            b = b * (1 - desaturationAmount) + gray * desaturationAmount;
        }

        // 2. Warmth (Color Tinting)
        r *= warmthFactorRed;
        g *= warmthFactorGreen;
        b *= warmthFactorBlue;

        // 3. Brightness Adjustment
        if (brightnessValue !== 0) {
            r += brightnessValue;
            g += brightnessValue;
            b += brightnessValue;
        }
        
        // 4. Contrast Adjustment
        if (contrastValue !== 0) {
            // Formula: C_out = Factor * (C_in - 128) + 128
            // Factor = (259 * (contrast + 255)) / (255 * (259 - contrast))
            const factor = (259 * (contrastValue + 255)) / (255 * (259 - contrastValue));
            r = factor * (r - 128) + 128;
            g = factor * (g - 128) + 128;
            b = factor * (b - 128) + 128;
        }

        // Clamp color values after tonal adjustments (before spatial effects)
        r = Math.max(0, Math.min(255, r));
        g = Math.max(0, Math.min(255, g));
        b = Math.max(0, Math.min(255, b));
        
        // Store these intermediary results before applying spatial effects
        let currentR = r;
        let currentG = g;
        let currentB = b;

        // 5. Vignette Effect
        if (vignetteStrength > 0 && maxDist > 0) { 
            const x = (i / 4) % width; // Current pixel's x coordinate
            const y = Math.floor((i / 4) / width); // Current pixel's y coordinate
            const dx = centerX - x;
            const dy = centerY - y;
            const dist = Math.sqrt(dx * dx + dy * dy); // Distance from center
            
            // Calculate vignette intensity
            // Normalized distance from center (0 at center, 1 at corners)
            let vigAmountNorm = dist / maxDist; 
            // Vignette effect ramps up from vignetteSoftness to 1 (maxDist)
            let vigIntensity = (vigAmountNorm - vignetteSoftness) / (1 - vignetteSoftness);
            
            // Ensure vigIntensity is between 0 and 1
            // (accounts for vignetteSoftness > vigAmountNorm or vignetteSoftness being close to 1)
            vigIntensity = Math.max(0, Math.min(1, vigIntensity));
            
            if (1 - vignetteSoftness <= 0) { // Handle vignetteSoftness >= 1 (no gradual vignette)
                 vigIntensity = (vigAmountNorm >=1) ? 1.0 : 0; // Full vignette only at exact corners or further
            }

            const reduction = 1.0 - (vigIntensity * vignetteStrength);
            
            currentR *= reduction;
            currentG *= reduction;
            currentB *= reduction;
            // Darkening values, so already clamped to 0 implicitly. No need for Math.max(0, ...) here.
        }

        // 6. Film Grain
        if (grainAmount > 0) {
            // Generate monochromatic noise (same noise for R, G, B)
            const noise = (Math.random() - 0.5) * grainAmount; // Noise range: [-grainAmount/2, grainAmount/2)
            currentR += noise;
            currentG += noise;
            currentB += noise;
        }

        // Final Clamp for RGB values and round to nearest integer
        data[i] = Math.max(0, Math.min(255, Math.round(currentR)));
        data[i + 1] = Math.max(0, Math.min(255, Math.round(currentG)));
        data[i + 2] = Math.max(0, Math.min(255, Math.round(currentB)));
        // Alpha channel (data[i+3]) is preserved
    }

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

    return canvas;
}