Image Cleanup Tool

/**
 * Cleans up an image by applying a median filter, which is effective for reducing impulse noise (like salt-and-pepper noise).
 * The Russian description "Замарашка" translates to "messy" or "slovenly", implying the tool cleans up noisy or imperfect images.
 * A median filter works by replacing each pixel's value with the median value of the pixels in its neighborhood, effectively smoothing out sharp, isolated variations.
 *
 * @param {Image} originalImg The original image object to process.
 * @param {number} radius The radius of the median filter kernel. A larger radius increases the smoothing effect but also reduces image detail more. Must be a non-negative integer. A radius of 1 corresponds to a 3x3 kernel, 2 to a 5x5 kernel, and so on. Defaults to 1.
 * @returns {HTMLCanvasElement} A new canvas element displaying the cleaned-up image.
 */
function processImage(originalImg, radius = 1) {
    const kRadius = Math.max(0, Math.floor(radius));

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

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

    ctx.drawImage(originalImg, 0, 0);

    // If the radius is 0, the filter has no effect, so we can return the original image on the canvas.
    if (kRadius === 0) {
        return canvas;
    }

    const originalImageData = ctx.getImageData(0, 0, width, height);
    const originalData = originalImageData.data;
    const newImageData = ctx.createImageData(width, height);
    const newData = newImageData.data;

    // Iterate over each pixel of 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 pixel's neighborhood defined by the radius.
            for (let ky = -kRadius; ky <= kRadius; ky++) {
                for (let kx = -kRadius; kx <= kRadius; kx++) {
                    const nx = x + kx;
                    const ny = y + ky;

                    // Handle edge cases by clamping the coordinates to the image boundaries.
                    const clampedX = Math.max(0, Math.min(width - 1, nx));
                    const clampedY = Math.max(0, Math.min(height - 1, ny));
                    const neighborIndex = (clampedY * width + clampedX) * 4;

                    reds.push(originalData[neighborIndex]);
                    greens.push(originalData[neighborIndex + 1]);
                    blues.push(originalData[neighborIndex + 2]);
                }
            }

            // Find the median value for each color channel.
            const medianIndex = Math.floor(reds.length / 2);
            
            reds.sort((a, b) => a - b);
            greens.sort((a, b) => a - b);
            blues.sort((a, b) => a - b);
            
            const medianRed = reds[medianIndex];
            const medianGreen = greens[medianIndex];
            const medianBlue = blues[medianIndex];
            
            // Set the new pixel value in the new image data.
            const targetIndex = (y * width + x) * 4;
            newData[targetIndex] = medianRed;
            newData[targetIndex + 1] = medianGreen;
            newData[targetIndex + 2] = medianBlue;
            
            // Preserve the original alpha channel to maintain transparency.
            newData[targetIndex + 3] = originalData[targetIndex + 3];
        }
    }

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

    return canvas;
}