High Quality Image Enhancer

/**
 * Enhances the quality of an image by adjusting brightness, contrast, saturation, and applying a sharpening filter.
 *
 * This function first applies color adjustments using the native and fast canvas filter property.
 * Then, it applies a sharpening effect using a manual convolution kernel method for high-quality results.
 *
 * @param {HTMLImageElement} originalImg The original input Image object.
 * @param {number} [sharpenAmount=0.3] The intensity of the sharpening filter. 0 means no sharpening. Recommended range: 0 to 1.
 * @param {number} [brightness=1.05] The brightness multiplier. 1 means no change. A value of 1.1 is a 10% increase.
 * @param {number} [contrast=1.05] The contrast multiplier. 1 means no change. A value of 1.1 is a 10% increase.
 * @param {number} [saturation=1.1] The saturation multiplier. 1 means no change. A value of 1.2 is a 20% increase.
 * @returns {HTMLCanvasElement} A new canvas element containing the enhanced image.
 */
function processImage(originalImg, sharpenAmount = 0.3, brightness = 1.05, contrast = 1.05, saturation = 1.1) {
    // Sanitize parameters to ensure they are valid numbers, falling back to defaults if not.
    sharpenAmount = Number(sharpenAmount) || 0.3;
    brightness = Number(brightness) || 1.05;
    contrast = Number(contrast) || 1.05;
    saturation = Number(saturation) || 1.1;

    // 1. Create a canvas and get its 2D rendering context.
    const canvas = document.createElement('canvas');
    // Using willReadFrequently is a performance hint for browsers.
    const ctx = canvas.getContext('2d', {
        willReadFrequently: true
    });

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

    // 2. Apply Brightness, Contrast, and Saturation using the fast, native canvas filter property.
    const filterStr = `brightness(${brightness}) contrast(${contrast}) saturate(${saturation})`;
    ctx.filter = filterStr;

    // Draw the original image onto the canvas. The filter is applied during this drawing step.
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Reset the filter to 'none' so it doesn't affect subsequent pixel manipulations.
    ctx.filter = 'none';

    // 3. Apply Sharpening using a convolution kernel (if sharpenAmount > 0).
    // This is done after the initial filters to sharpen the adjusted colors.
    if (sharpenAmount > 0) {
        // Get the pixel data from the canvas (which now has the B/C/S adjustments).
        const srcImageData = ctx.getImageData(0, 0, width, height);
        const srcPixels = srcImageData.data;

        // Create a new ImageData object for the output.
        const dstImageData = ctx.createImageData(width, height);
        const dstPixels = dstImageData.data;

        // Initialize the destination with the source pixels. This copies all pixel data,
        // including the border pixels and the alpha channel, which we won't be modifying further.
        dstPixels.set(srcPixels);

        // Define the sharpening kernel. The weights sum to 1, which preserves the image's overall brightness.
        const s = sharpenAmount;
        const kernel = [
            [0, -s, 0],
            [-s, 1 + 4 * s, -s],
            [0, -s, 0]
        ];

        const kernelSize = 3;
        const halfKernel = Math.floor(kernelSize / 2);

        // Iterate over each pixel of the image, excluding a 1-pixel border.
        // The border pixels will remain as they were in the B/C/S-adjusted image.
        for (let y = halfKernel; y < height - halfKernel; y++) {
            for (let x = halfKernel; x < width - halfKernel; x++) {
                let r = 0,
                    g = 0,
                    b = 0;

                // Apply the kernel to the current pixel's 3x3 neighborhood.
                for (let ky = 0; ky < kernelSize; ky++) {
                    for (let kx = 0; kx < kernelSize; kx++) {
                        const weight = kernel[ky][kx];
                        // Skip calculations for zero-weight kernel elements for a minor optimization.
                        if (weight === 0) continue;

                        const neighborX = x + kx - halfKernel;
                        const neighborY = y + ky - halfKernel;
                        const neighborIndex = (neighborY * width + neighborX) * 4;

                        // Accumulate the weighted color values from the source pixels.
                        r += srcPixels[neighborIndex] * weight;
                        g += srcPixels[neighborIndex + 1] * weight;
                        b += srcPixels[neighborIndex + 2] * weight;
                    }
                }

                const dstIndex = (y * width + x) * 4;

                // Assign the new, calculated color values to the destination pixel,
                // clamping them to the valid 0-255 range.
                dstPixels[dstIndex] = Math.max(0, Math.min(255, r));
                dstPixels[dstIndex + 1] = Math.max(0, Math.min(255, g));
                dstPixels[dstIndex + 2] = Math.max(0, Math.min(255, b));
            }
        }

        // Put the newly sharpened pixel data back onto the canvas.
        ctx.putImageData(dstImageData, 0, 0);
    }

    // 4. Return the final enhanced canvas.
    return canvas;
}