Image Lomography Purple Filter Effect Tool

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

    // Set canvas dimensions to the image dimensions
    // For an Image object, .width and .height are suitable after it has loaded.
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;

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

    // Get image data to manipulate pixels
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    const width = canvas.width;
    const height = canvas.height;

    // Calculate center and max distance for vignette
    const centerX = width / 2;
    const centerY = height / 2;
    const maxDist = Math.sqrt(centerX * centerX + centerY * centerY);

    // --- Lomography Purple Filter Effect Parameters ---
    // These values are chosen to give a characteristic "Lomography Purple" look.

    // 1. Purple Tint Parameters
    const tintRedFactor = 1.15;     // Multiplier for the red channel
    const tintBlueFactor = 1.25;    // Multiplier for the blue channel
    const tintGreenSuppress = 0.85; // Multiplier to suppress the green channel
    const crossChannelRedBoost = 0.1; // How much of blue's value to add to red
    const crossChannelBlueBoost = 0.1;// How much of red's value to add to blue

    // 2. Saturation Parameters
    const saturationFactor = 1.3;   // Factor to boost color saturation (1.0 is no change)

    // 3. Contrast Parameters
    const contrastFactor = 1.4;     // Factor to boost contrast (1.0 is no change)

    // 4. Vignette Parameters
    const vignetteStrength = 0.7;   // How dark the vignette effect is (0 to 1)
    const vignetteStart = 0.3;      // Radius from center where vignette begins (0 to 1, fraction of maxDist)
                                    // E.g., 0.3 means the inner 30% of radius is unaffected.

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

        // --- Step 1: Apply Purple Tint ---
        // This involves adjusting channel intensities and mixing them slightly
        // to shift colors towards a purple spectrum.
        let newR = r * tintRedFactor + b * crossChannelRedBoost;
        let newG = g * tintGreenSuppress;
        let newB = b * tintBlueFactor + r * crossChannelBlueBoost;
        
        r = Math.max(0, Math.min(255, newR));
        g = Math.max(0, Math.min(255, newG));
        b = Math.max(0, Math.min(255, newB));

        // --- Step 2: Adjust Saturation ---
        if (saturationFactor !== 1.0) {
            const gray = 0.299 * r + 0.587 * g + 0.114 * b; // Calculate luminance
            r = gray * (1 - saturationFactor) + r * saturationFactor;
            g = gray * (1 - saturationFactor) + g * saturationFactor;
            b = gray * (1 - saturationFactor) + b * saturationFactor;

            r = Math.max(0, Math.min(255, r));
            g = Math.max(0, Math.min(255, g));
            b = Math.max(0, Math.min(255, b));
        }
        
        // --- Step 3: Adjust Contrast ---
        if (contrastFactor !== 1.0) {
            r = 128 + (r - 128) * contrastFactor;
            g = 128 + (g - 128) * contrastFactor;
            b = 128 + (b - 128) * contrastFactor;

            r = Math.max(0, Math.min(255, r));
            g = Math.max(0, Math.min(255, g));
            b = Math.max(0, Math.min(255, b));
        }
        
        // --- Step 4: Apply Vignetting ---
        if (vignetteStrength > 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 = x - centerX;
            const dy = y - centerY;
            const dist = Math.sqrt(dx * dx + dy * dy);

            let darkeningFactor = 1.0;
            if (dist > maxDist * vignetteStart) {
                // Calculate how far into the vignette zone the pixel is
                const normalizedDistInVignetteZone = 
                    (dist - maxDist * vignetteStart) / (maxDist * (1.0 - vignetteStart));
                
                // Apply vignette strength, clamped to ensure it doesn't over-darken or lighten
                const vignetteAmount = Math.min(1.0, normalizedDistInVignetteZone * vignetteStrength);
                darkeningFactor = 1.0 - vignetteAmount;
            }
            
            // Ensure the factor is within [0, 1] range
            darkeningFactor = Math.max(0, Math.min(1, darkeningFactor));

            r *= darkeningFactor;
            g *= darkeningFactor;
            b *= darkeningFactor;
            
            // Values are already clamped from previous steps, and darkeningFactor is [0,1],
            // so new r, g, b will be within [0, previous_clamped_max (<=255)].
            // Final clamp is not strictly needed but good for absolute safety.
            r = Math.max(0, Math.min(255, r));
            g = Math.max(0, Math.min(255, g));
            b = Math.max(0, Math.min(255, b));
        }
        
        // Update pixel data
        data[i] = r;
        data[i + 1] = g;
        data[i + 2] = b;
        // Alpha channel (data[i+3]) remains unchanged
    }

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

    return canvas;
}