Image Lomo LC-A Filter Effect Tool

function processImage(originalImg, contrast = 1.4, saturation = 1.2, vignetteStrength = 0.6, vignetteFalloff = 2.0, redBoost = 1.1, greenBoost = 1.0, blueBoost = 1.1) {
    const canvas = document.createElement('canvas');
    // Using { willReadFrequently: true } can be a performance hint for some browsers.
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    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);

    // Handle cases where the image might be 0x0, returning the empty canvas.
    if (width === 0 || height === 0) {
        return canvas;
    }
    
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data; // data is a Uint8ClampedArray

    const centerX = width / 2;
    const centerY = height / 2;
    // Calculate the maximum distance from the center to a corner.
    // This is used to normalize the distance for vignette calculation.
    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. Color Boost
        // Apply channel-specific boosts.
        r *= redBoost;
        g *= greenBoost;
        b *= blueBoost;
        // Clamp values to the [0, 255] range after boosting.
        r = Math.max(0, Math.min(255, r));
        g = Math.max(0, Math.min(255, g));
        b = Math.max(0, Math.min(255, b));

        // 2. Contrast
        // Adjust contrast: f(v) = factor * (v - 128) + 128
        // This formula increases the difference from the mid-gray value (128).
        r = contrast * (r - 128) + 128;
        g = contrast * (g - 128) + 128;
        b = contrast * (b - 128) + 128;
        // Clamp values after contrast adjustment.
        r = Math.max(0, Math.min(255, r));
        g = Math.max(0, Math.min(255, g));
        b = Math.max(0, Math.min(255, b));
        
        // 3. Saturation
        // Calculate luminance using standard Rec.601 coefficients.
        const lum = 0.299 * r + 0.587 * g + 0.114 * b;
        // Adjust saturation: f(v) = lum + S * (v - lum)
        // This formula moves color components away from (S > 1) or towards (S < 1) luminance.
        r = lum + saturation * (r - lum);
        g = lum + saturation * (g - lum);
        b = lum + saturation * (b - lum);
        // Clamp values after saturation adjustment.
        r = Math.max(0, Math.min(255, r));
        g = Math.max(0, Math.min(255, g));
        b = Math.max(0, Math.min(255, b));

        // 4. Vignetting
        // Calculate current pixel's coordinates.
        const currentPixelX = (i / 4) % width;
        const currentPixelY = Math.floor((i / 4) / width);
        
        // Calculate distance of the current pixel from the center.
        const dx = currentPixelX - centerX;
        const dy = currentPixelY - centerY;
        const dist = Math.sqrt(dx * dx + dy * dy);
        
        let vignetteEffect = 0;
        // Avoid division by zero if maxDist is 0 (only for invalid image dimensions like 0x0).
        if (maxDist > 0) {
            // Normalized distance from center (0 to 1), powered by vignetteFalloff for curve.
            vignetteEffect = Math.pow(dist / maxDist, vignetteFalloff);
        }
        
        // Calculate brightness multiplier (1 at center, decreases towards edges).
        // vignetteStrength controls how dark the edges become.
        const brightnessMultiplier = 1.0 - (vignetteStrength * vignetteEffect);
        
        // Apply vignette. If brightnessMultiplier is negative (high vignetteStrength),
        // r, g, b can become negative here.
        r *= brightnessMultiplier;
        g *= brightnessMultiplier;
        b *= brightnessMultiplier;

        // Final assignment to the ImageData array.
        // Values are rounded to the nearest integer and clamped to [0, 255].
        // Uint8ClampedArray would do this automatically, but explicit handling is clearer
        // and robust if `data` were a different array type.
        data[i]     = Math.max(0, Math.min(255, Math.round(r)));
        data[i + 1] = Math.max(0, Math.min(255, Math.round(g)));
        data[i + 2] = Math.max(0, Math.min(255, Math.round(b)));
        // Alpha channel (data[i + 3]) remains unchanged.
    }

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

    return canvas;
}