Image Sharpener For Enhancing Low Quality Photos

/**
 * Sharpens an image using a convolution filter (a simplified Unsharp Mask).
 * This works by increasing the contrast along the edges in an image.
 *
 * @param {HTMLImageElement} originalImg The original image object to be sharpened.
 * @param {number} strength A value from 0 upwards that controls the intensity of the sharpening.
 *                          0 means no sharpening. 0.5 is a moderate amount, 1.0 is strong.
 *                          Values greater than 1 can produce harsh, over-sharpened results.
 * @returns {HTMLCanvasElement} A new canvas element displaying the sharpened image.
 */
function processImage(originalImg, strength = 0.5) {
    // Ensure strength is a valid, non-negative number.
    const s = Number(strength);
    if (isNaN(s) || s < 0) {
        strength = 0;
    }

    // Create a canvas element to work with.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Get the intrinsic dimensions of the image.
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    // Set the canvas size to match the image.
    canvas.width = width;
    canvas.height = height;

    // Draw the original image onto the canvas.
    ctx.drawImage(originalImg, 0, 0);

    // If strength is 0, sharpening is not needed. Return the canvas with the original image.
    if (strength === 0) {
        return canvas;
    }

    // Get the pixel data from the canvas. This is a 1D array of RGBA values.
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // Create a copy of the original pixel data to read from.
    // This prevents the ongoing calculations from affecting the source pixels for subsequent pixels.
    const srcData = new Uint8ClampedArray(data);

    // The sharpening process uses a 3x3 convolution kernel.
    // We iterate over each pixel, skipping the 1-pixel border to avoid edge issues.
    for (let y = 1; y < height - 1; y++) {
        for (let x = 1; x < width - 1; x++) {
            // Get the flattened array index for the current pixel (x, y).
            const i = (y * width + x) * 4;

            // Get indices for the neighboring pixels (top, bottom, left, right).
            const top = i - width * 4;
            const bottom = i + width * 4;
            const left = i - 4;
            const right = i + 4;

            // Apply the sharpening kernel to each color channel (R, G, B).
            // The formula is: New = (Center * (1 + 4s)) - (Neighbors * s)
            // This enhances the center pixel's value relative to its neighbors.
            const r = srcData[i] * (1 + 4 * s) - (srcData[top] + srcData[bottom] + srcData[left] + srcData[right]) * s;
            const g = srcData[i + 1] * (1 + 4 * s) - (srcData[top + 1] + srcData[bottom + 1] + srcData[left + 1] + srcData[right + 1]) * s;
            const b = srcData[i + 2] * (1 + 4 * s) - (srcData[top + 2] + srcData[bottom + 2] + srcData[left + 2] + srcData[right + 2]) * s;

            // Assign the new, sharpened pixel values to the output data array.
            // The Uint8ClampedArray will automatically clamp values to the 0-255 range.
            data[i] = r;
            data[i + 1] = g;
            data[i + 2] = b;
            // The alpha channel (data[i + 3]) remains unchanged.
        }
    }

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

    // Return the canvas element.
    return canvas;
}