Image Pixel Unblurring Tool

/**
 * Unblurs an image by applying a sharpening convolution filter.
 * This effect enhances edges to make the image appear less blurry.
 *
 * @param {Image} originalImg The original javascript Image object to process.
 * @param {number} amount The strength of the sharpening effect. A value of 0 will not change the image. Recommended range: 0.5 to 3.0. Defaults to 1.0.
 * @returns {HTMLCanvasElement} A new canvas element with the sharpened image.
 */
async function processImage(originalImg, amount = 1.0) {
    // Create a canvas element to work on
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Get the original image dimensions
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

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

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

    // If amount is 0 or less, no sharpening is needed, return the canvas as is
    if (amount <= 0) {
        return canvas;
    }

    // Get the pixel data from the canvas
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // Create a copy of the pixel data to read from, to avoid modifying pixels
    // before their neighbors have been processed.
    const originalData = Uint8ClampedArray.from(data);

    // Define the sharpening convolution kernel.
    // The sum of the kernel's weights should be 1 to maintain overall brightness.
    // The center value is amplified, while the surrounding values are subtracted.
    const kernel = [
        0, -amount, 0, -amount, 1 + 4 * amount, -amount,
        0, -amount, 0
    ];

    // Iterate over each pixel of the image, excluding a 1-pixel border
    // as the kernel needs to access neighboring pixels.
    for (let y = 1; y < height - 1; y++) {
        for (let x = 1; x < width - 1; x++) {
            const i = (y * width + x) * 4; // Index of the current pixel's Red channel

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

            // Apply the 3x3 kernel to the current pixel and its neighbors
            for (let ky = -1; ky <= 1; ky++) {
                for (let kx = -1; kx <= 1; kx++) {
                    // Get the position of the neighboring pixel
                    const px = x + kx;
                    const py = y + ky;

                    // Get the index of the neighboring pixel in the flat data array
                    const neighborIndex = (py * width + px) * 4;
                    // Get the index of the weight in the flat kernel array
                    const kernelIndex = (ky + 1) * 3 + (kx + 1);

                    // Multiply the neighbor's color value by the kernel weight and accumulate
                    r += originalData[neighborIndex] * kernel[kernelIndex];
                    g += originalData[neighborIndex + 1] * kernel[kernelIndex];
                    b += originalData[neighborIndex + 2] * kernel[kernelIndex];
                }
            }

            // Assign the new convoluted value to the pixel
            // The Uint8ClampedArray will automatically clamp the values between 0 and 255.
            data[i] = r;
            data[i + 1] = g;
            data[i + 2] = b;
            // The alpha channel (data[i + 3]) remains unchanged.
        }
    }

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

    // Return the canvas with the unblurred/sharpened image
    return canvas;
}