Image Lomo Filter Application

/**
 * Applies a Lomo-like filter to an image.
 * The Lomo effect is characterized by high contrast, saturated colors,
 * slight darkening, and vignetting.
 *
 * @param {Image} originalImg The original JavaScript Image object.
 * @param {number} [contrast=1.4] The contrast level (e.g., 1.0 is no change, 1.4 is 40% higher contrast).
 * @param {number} [saturation=1.2] The saturation level (e.g., 1.0 is no change, 1.2 is 20% higher saturation).
 * @param {number} [brightness=0.9] The brightness level (e.g., 1.0 is no change, 0.9 is 10% darker).
 * @param {number} [vignetteStrength=0.6] The strength of the vignette effect (0 to 1). 0 means no vignette, 1 means edges are fully black.
 * @param {number} [vignetteSoftness=0.7] Controls the extent of the central clear area of the vignette (0 to 1).
 *                                        A value of 0 means the vignette effect starts from the very center of the image (widest, softest vignette).
 *                                        A value of 1 means the clear area extends to the image corners (no vignette effect).
 *                                        A typical value like 0.7 means the central 70% of the image (measured by radius from center to corner)
 *                                        remains clear, and the vignette gradient is applied over the outer 30%.
 * @returns {HTMLCanvasElement} A new canvas element with the Lomo filter applied.
 */
function processImage(originalImg, contrast = 1.4, saturation = 1.2, brightness = 0.9, vignetteStrength = 0.6, vignetteSoftness = 0.7) {
    const canvas = document.createElement('canvas');
    // Use naturalWidth/Height for intrinsic image dimensions. Fallback to width/height if available.
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;
    canvas.width = width;
    canvas.height = height;

    const ctx = canvas.getContext('2d');

    if (!ctx) {
        console.error("Could not get 2D context. Returning original image drawn on a new canvas as fallback.");
        // Create a fallback canvas and draw the original image if possible.
        const fallbackCanvas = document.createElement('canvas');
        fallbackCanvas.width = width;
        fallbackCanvas.height = height;
        const fallbackCtx = fallbackCanvas.getContext('2d');
        if (fallbackCtx) {
            fallbackCtx.drawImage(originalImg, 0, 0, width, height);
        }
        return fallbackCanvas; // Returns canvas with original image or an empty canvas if fallbackCtx also fails.
    }

    // Apply brightness, saturation, contrast using the canvas filter property for performance and accuracy.
    // The order of filters can affect the final look. Common order is brightness -> saturate -> contrast.
    let filtersApplied = false;
    if (typeof ctx.filter === 'string') { // Check if the filter property is supported by the browser
        ctx.filter = `brightness(${brightness}) saturate(${saturation}) contrast(${contrast})`;
        filtersApplied = true;
    } else {
        // Log a warning if ctx.filter is not supported.
        // The image will be drawn without these specific filter effects; only vignette will be applied.
        console.warn("CanvasRenderingContext2D.filter property not supported by this browser. Brightness, saturation, and contrast effects will be skipped.");
    }
    
    // Draw the original image onto the canvas. The filter (if supported and set) will be applied during this drawing operation.
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Reset the filter to 'none' so it doesn't affect subsequent drawing operations (like the vignette).
    if (filtersApplied) {
      ctx.filter = 'none';
    }

    // Apply Vignette effect
    // Vignetting darkens the corners/edges of the image.
    // Ensure vignetteStrength is within [0,1]
    const effectiveVignetteStrength = Math.max(0, Math.min(1, vignetteStrength));

    if (effectiveVignetteStrength > 0) {
        const centerX = width / 2;
        const centerY = height / 2;
        
        // Calculate the largest distance from the center to a corner for the outer radius of the gradient.
        // This ensures the vignette covers the entire image, regardless of its aspect ratio.
        const outerRadius = Math.sqrt(Math.pow(centerX, 2) + Math.pow(centerY, 2));
        
        // innerGradientRadius is where the vignette effect starts (i.e., the radius of the fully transparent central area).
        // vignetteSoftness determines this inner radius as a fraction of outerRadius.
        // Clamp vignetteSoftness to [0,1] as well.
        const effectiveVignetteSoftness = Math.max(0, Math.min(1, vignetteSoftness));
        const innerGradientRadius = outerRadius * effectiveVignetteSoftness;

        const gradient = ctx.createRadialGradient(centerX, centerY, innerGradientRadius, centerX, centerY, outerRadius);
        
        // The gradient transitions from fully transparent in the center to black with `effectiveVignetteStrength` opacity at the edges.
        gradient.addColorStop(0, 'rgba(0,0,0,0)'); 
        gradient.addColorStop(1, `rgba(0,0,0,${effectiveVignetteStrength})`);

        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, width, height); // Draw the vignette overlay
    }

    return canvas;
}