Photo Real Life Capturer

/**
 * Simulates a "real life" photo capture by applying a combination of color enhancement,
 * film grain, and a vignette effect to an image.
 *
 * @param {Image} originalImg The original JavaScript Image object.
 * @param {number} contrast Adjusts the contrast of the image. 1 is no change. Default is 1.15.
 * @param {number} saturation Adjusts the color saturation. 1 is no change. Default is 1.1.
 * @param {number} brightness Adjusts the brightness. 1 is no change. Default is 1.05.
 * @param {number} noise The amount of grain to add (0-255). 0 is no noise. Default is 15.
 * @param {number} vignette The strength of the vignette (darker corners) from 0 to 1. Default is 0.4.
 * @returns {HTMLCanvasElement} A new canvas element with the processed image.
 */
function processImage(originalImg, contrast = 1.15, saturation = 1.1, brightness = 1.05, noise = 15, vignette = 0.4) {
    const canvas = document.createElement('canvas');
    // Using { willReadFrequently: true } can optimize performance for frequent getImageData calls.
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;
    canvas.width = width;
    canvas.height = height;

    // Step 1: Apply color enhancement filters to make the image more vivid.
    ctx.filter = `contrast(${contrast}) saturate(${saturation}) brightness(${brightness})`;
    ctx.drawImage(originalImg, 0, 0, width, height);
    
    // Reset filter to prevent it from affecting subsequent pixel manipulations.
    ctx.filter = 'none';

    // Step 2: Apply a noise/grain effect to simulate real photo texture.
    if (noise > 0) {
        const imageData = ctx.getImageData(0, 0, width, height);
        const data = imageData.data;
        for (let i = 0; i < data.length; i += 4) {
            // Add a random value to each color channel to create monochrome noise.
            const grain = (Math.random() - 0.5) * noise;
            data[i]     = Math.max(0, Math.min(255, data[i] + grain));     // Red
            data[i + 1] = Math.max(0, Math.min(255, data[i + 1] + grain)); // Green
            data[i + 2] = Math.max(0, Math.min(255, data[i + 2] + grain)); // Blue
        }
        ctx.putImageData(imageData, 0, 0);
    }

    // Step 3: Apply a vignette effect to simulate lens optics and draw focus.
    if (vignette > 0 && vignette <= 1) {
        // Calculate a radius that covers the corners of the image.
        const outerRadius = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)) / 2;

        // Create a radial gradient from the center to the corners.
        const gradient = ctx.createRadialGradient(
            width / 2, height / 2, 0,
            width / 2, height / 2, outerRadius
        );

        // Make the center area transparent, fading to black at the edges.
        gradient.addColorStop(0.4, 'rgba(0,0,0,0)'); // Adjust this value to change the size of the vignette's clear area.
        gradient.addColorStop(1, `rgba(0,0,0,${vignette})`);
        
        // Draw the gradient over the entire canvas.
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, width, height);
    }

    return canvas;
}