Image Realism Enhancer

/**
 * Enhances the realism of an image by adjusting contrast, saturation, sharpness, and adding a vignette.
 * This function mimics common post-processing techniques used in photography to make images appear more crisp and focused.
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {number} [contrast=1.15] Controls the contrast. 1 is no change. Values between 1.1 and 1.3 are common.
 * @param {number} [saturation=1.15] Controls the color saturation. 1 is no change. Values between 1.1 and 1.4 add vibrancy.
 * @param {number} [sharpness=0.3] Controls the sharpness effect, from 0 (none) to 1 (max). This is computationally intensive.
 * @param {number} [vignetteStrength=0.4] Controls the darkness of the corners, from 0 (none) to 1 (max).
 * @returns {HTMLCanvasElement} A canvas element with the processed image.
 */
function processImage(originalImg, contrast = 1.15, saturation = 1.15, sharpness = 0.3, vignetteStrength = 0.4) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

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

    // 1. Apply fast contrast and saturation using built-in filters
    ctx.filter = `contrast(${contrast}) saturate(${saturation})`;
    ctx.drawImage(originalImg, 0, 0, w, h);
    // Reset filter to none so it doesn't affect subsequent drawing
    ctx.filter = 'none';

    // 2. Apply sharpness using a convolution kernel for a high-quality result
    // This is more complex but provides a true sharpening effect.
    if (sharpness > 0) {
        const sharpnessAmount = Math.max(0, Math.min(1, parseFloat(sharpness)));

        // Get the pixel data from the canvas (which already has contrast/saturation applied)
        const imageData = ctx.getImageData(0, 0, w, h);
        const sourceData = imageData.data;
        const outputData = new Uint8ClampedArray(sourceData);

        const kernel = [
             0, -1,  0,
            -1,  5, -1,
             0, -1,  0
        ];

        // Loop through each pixel (excluding the 1px border)
        for (let y = 1; y < h - 1; y++) {
            for (let x = 1; x < w - 1; x++) {
                const i = (y * w + x) * 4;

                let r = 0, g = 0, b = 0;

                // Apply the convolution kernel
                for (let ky = -1; ky <= 1; ky++) {
                    for (let kx = -1; kx <= 1; kx++) {
                        const kernelIndex = (ky + 1) * 3 + (kx + 1);
                        const weight = kernel[kernelIndex];
                        if (weight === 0) continue;

                        const pixelIndex = ((y + ky) * w + (x + kx)) * 4;
                        r += sourceData[pixelIndex] * weight;
                        g += sourceData[pixelIndex + 1] * weight;
                        b += sourceData[pixelIndex + 2] * weight;
                    }
                }
                
                // Blend the sharpened pixel with the original based on sharpnessAmount
                outputData[i]     = sourceData[i]     * (1 - sharpnessAmount) + r * sharpnessAmount;
                outputData[i + 1] = sourceData[i + 1] * (1 - sharpnessAmount) + g * sharpnessAmount;
                outputData[i + 2] = sourceData[i + 2] * (1 - sharpnessAmount) + b * sharpnessAmount;
            }
        }
        
        // Put the modified pixel data back onto the canvas
        ctx.putImageData(new ImageData(outputData, w, h), 0, 0);
    }

    // 3. Apply a vignette effect to draw focus to the center
    if (vignetteStrength > 0) {
        // Use 'multiply' to darken the edges
        ctx.globalCompositeOperation = 'multiply';
        
        const strength = Math.max(0, Math.min(1, parseFloat(vignetteStrength)));
        const outerRadius = Math.sqrt(Math.pow(w / 2, 2) + Math.pow(h / 2, 2));

        // Create a radial gradient from white (center) to dark gray (edges)
        const gradient = ctx.createRadialGradient(w / 2, h / 2, 0, w / 2, h / 2, outerRadius);

        const edgeDarkness = Math.round(255 * (1 - strength));
        const edgeColor = `rgb(${edgeDarkness},${edgeDarkness},${edgeDarkness})`;
        
        // Define how quickly the vignette effect starts from the center
        const vignetteStartPoint = 1 - strength;

        gradient.addColorStop(0, 'white');
        gradient.addColorStop(vignetteStartPoint, 'white'); // Center area remains unchanged
        gradient.addColorStop(1, edgeColor); // Edges are darkened

        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, w, h);
        
        // Reset the composite operation to default
        ctx.globalCompositeOperation = 'source-over';
    }

    return canvas;
}