Image Quality Enhancer Tool

/**
 * Enhances the quality of an image by adjusting its sharpness, brightness, and contrast.
 *
 * @param {Image} originalImg The original Javascript Image object.
 * @param {number} sharpness The amount of sharpening to apply. 0 means no sharpening. Recommended range: 0 to 1. Default is 0.5.
 * @param {number} brightness The brightness adjustment. Negative values darken the image, positive values lighten it. Recommended range: -100 to 100. Default is 0.
 * @param {number} contrast The contrast adjustment. Negative values decrease contrast, positive values increase it. Recommended range: -100 to 100. Default is 0.
 * @returns {HTMLCanvasElement} A new canvas element displaying the enhanced image.
 */
async function processImage(originalImg, sharpness = 0.5, brightness = 0, contrast = 0) {
    // 1. Create canvas and get 2D context
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height to get the original image dimensions
    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;
    canvas.width = w;
    canvas.height = h;

    // 2. Apply Brightness and Contrast using the fast, built-in canvas filter
    // Clamp values to a reasonable range to prevent extreme results
    const clampedBrightness = Math.max(-100, Math.min(100, brightness));
    const clampedContrast = Math.max(-100, Math.min(100, contrast));
    
    ctx.filter = `brightness(${1 + clampedBrightness / 100}) contrast(${1 + clampedContrast / 100})`;
    
    // Draw the image onto the canvas, applying the filter
    ctx.drawImage(originalImg, 0, 0, w, h);

    // Reset the filter so it doesn't affect the next steps
    ctx.filter = 'none';

    // 3. Apply Sharpening using a convolution kernel if sharpness is applied
    const clampedSharpness = Math.max(0, sharpness);
    if (clampedSharpness > 0) {
        // Get the pixel data from the canvas (which already has brightness/contrast applied)
        const imageData = ctx.getImageData(0, 0, w, h);
        const data = imageData.data;

        // Create a copy of the pixel data to read from. This is crucial because
        // we need the original pixel values for each calculation, not the ones
        // we've just modified in the same pass.
        const srcData = new Uint8ClampedArray(data);

        // The 3x3 sharpening convolution kernel
        // The sum of the kernel weights is 1, which preserves the image's overall brightness.
        const kernel = [
            0,                 -clampedSharpness, 0,
            -clampedSharpness, 1 + 4 * clampedSharpness, -clampedSharpness,
            0,                 -clampedSharpness, 0
        ];
        const kernelSize = 3;
        const halfKernel = Math.floor(kernelSize / 2);

        // Loop through every pixel in the image (except the 1-pixel border)
        for (let y = halfKernel; y < h - halfKernel; y++) {
            for (let x = halfKernel; x < w - halfKernel; x++) {

                let sumR = 0, sumG = 0, sumB = 0;

                // Apply the convolution kernel to the 3x3 neighborhood
                for (let ky = 0; ky < kernelSize; ky++) {
                    for (let kx = 0; kx < kernelSize; kx++) {
                        // Get the coordinates of the neighboring pixel
                        const px = x + kx - halfKernel;
                        const py = y + ky - halfKernel;

                        // Get the index of the source pixel in the 1D data array
                        const srcIndex = (py * w + px) * 4;
                        const weight = kernel[ky * kernelSize + kx];

                        // Apply the kernel weight to each color channel
                        sumR += srcData[srcIndex] * weight;
                        sumG += srcData[srcIndex + 1] * weight;
                        sumB += srcData[srcIndex + 2] * weight;
                        // Alpha channel (srcData[srcIndex + 3]) is ignored
                    }
                }

                // Get the index of the destination pixel
                const dstIndex = (y * w + x) * 4;

                // Set the new, sharpened pixel value in the destination data.
                // The Uint8ClampedArray will automatically clamp values to the 0-255 range.
                data[dstIndex] = sumR;
                data[dstIndex + 1] = sumG;
                data[dstIndex + 2] = sumB;
            }
        }

        // Put the modified pixel data back onto the canvas
        ctx.putImageData(imageData, 0, 0);
    }

    // 4. Return the resulting canvas element
    return canvas;
}