Image Denoise Tool

/**
 * Denoises an image using a median filter algorithm.
 * The median filter is a non-linear digital filtering technique, often used to remove noise.
 * It replaces each pixel's value with the median value of the intensities in the neighborhood of that pixel.
 * This function works by iterating through each pixel, collecting the color values of its neighbors
 * within a specified radius, finding the median for each color channel (Red, Green, Blue), and
 * creating a new image with these median values.
 *
 * @param {HTMLImageElement} originalImg The original image element to be denoised.
 * @param {number} [radius=1] The radius of the neighborhood to consider for each pixel. A radius of 1 means a 3x3 kernel, 2 means a 5x5 kernel, etc. Larger values result in more smoothing but can also blur details.
 * @returns {HTMLCanvasElement} A new canvas element with the denoised image.
 */
function processImage(originalImg, radius = 1) {
    // Ensure radius is a non-negative integer
    const kernelRadius = Math.max(0, Math.floor(radius));

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

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

    canvas.width = width;
    canvas.height = height;

    // Draw the original image to the canvas to access its pixel data
    ctx.drawImage(originalImg, 0, 0);

    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    const newImageData = ctx.createImageData(width, height);
    const newData = newImageData.data;

    // Helper function to find the median of a number array
    const findMedian = (arr) => {
        // Sort the array to find the middle element
        arr.sort((a, b) => a - b);
        const mid = Math.floor(arr.length / 2);
        // Handle both even and odd length arrays
        if (arr.length % 2 === 0) {
            return (arr[mid - 1] + arr[mid]) / 2;
        }
        return arr[mid];
    };

    // Iterate over each pixel in the image
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            const reds = [];
            const greens = [];
            const blues = [];
            
            // Iterate over the neighborhood defined by the kernel radius
            for (let ky = -kernelRadius; ky <= kernelRadius; ky++) {
                for (let kx = -kernelRadius; kx <= kernelRadius; kx++) {
                    const neighborY = y + ky;
                    const neighborX = x + kx;

                    // Check if the neighbor pixel is within image bounds
                    if (neighborY >= 0 && neighborY < height && neighborX >= 0 && neighborX < width) {
                        const offset = (neighborY * width + neighborX) * 4;
                        reds.push(data[offset]);
                        greens.push(data[offset + 1]);
                        blues.push(data[offset + 2]);
                    }
                }
            }

            // Calculate the median for each color channel
            const medianRed = findMedian(reds);
            const medianGreen = findMedian(greens);
            const medianBlue = findMedian(blues);

            // Set the new pixel value in the output data array
            const currentIndex = (y * width + x) * 4;
            newData[currentIndex] = medianRed;
            newData[currentIndex + 1] = medianGreen;
            newData[currentIndex + 2] = medianBlue;
            newData[currentIndex + 3] = data[currentIndex + 3]; // Preserve the original alpha channel
        }
    }

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

    return canvas;
}