Photo Of Real Life Moments

function processImage(originalImg, sepiaAmount = 0.5, saturation = 0.8, contrast = 1.1, brightness = 1.0, vignetteAmount = 0.6, noiseAmount = 20) {
    // Create a canvas and set its dimensions to match the image.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const w = originalImg.naturalWidth || originalImg.width;
    const h = originalImg.naturalHeight || originalImg.height;
    canvas.width = w;
    canvas.height = h;

    // Apply CSS-like filters for a base vintage look (sepia, saturation, etc.).
    // This is a fast, hardware-accelerated way to handle color grading.
    ctx.filter = `sepia(${sepiaAmount}) saturate(${saturation}) contrast(${contrast}) brightness(${brightness})`;
    
    // Draw the original image onto the canvas. The filter is applied during this step.
    ctx.drawImage(originalImg, 0, 0, w, h);

    // Reset the filter so it won't affect subsequent drawing operations like the vignette.
    ctx.filter = 'none';

    // Add a vignette effect (darker corners) to focus the viewer's attention.
    if (vignetteAmount > 0 && vignetteAmount <= 1) {
        // Calculate a radius that extends to the corners of the image.
        const outerRadius = Math.sqrt(Math.pow(w / 2, 2) + Math.pow(h / 2, 2));
        
        // Create a radial gradient that is transparent in the center and dark at the edges.
        const gradient = ctx.createRadialGradient(w / 2, h / 2, 0, w / 2, h / 2, outerRadius);
        gradient.addColorStop(0.4, 'rgba(0,0,0,0)'); 
        gradient.addColorStop(1, `rgba(0,0,0,${vignetteAmount})`);

        // Draw the gradient over the entire image.
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, w, h);
    }
    
    // Add film grain/noise for a more authentic, textured look.
    // This is done by manipulating pixel data directly.
    if (noiseAmount > 0) {
        const imageData = ctx.getImageData(0, 0, w, h);
        const data = imageData.data;
        
        // Loop through each pixel. A step of 4 is used because each pixel is represented by 4 values (R, G, B, A).
        for (let i = 0; i < data.length; i += 4) {
            // Generate a random noise value.
            const noise = (Math.random() - 0.5) * noiseAmount;
            
            // Add the same noise value to the red, green, and blue channels.
            data[i]     += noise; // Red
            data[i + 1] += noise; // Green
            data[i + 2] += noise; // Blue
        }
        
        // Put the modified, noisy pixel data back onto the canvas.
        // The browser automatically clamps color values to the valid 0-255 range.
        ctx.putImageData(imageData, 0, 0);
    }

    // Return the canvas element containing the final processed image.
    return canvas;
}