Image Pixel Art Denoiser

/**
 * Denoises an image using a mode filter, which is effective for pixel art.
 * It replaces each pixel with the most frequent color in its local neighborhood.
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {number} neighborhoodSize The radius of the neighborhood to consider for each pixel. A value of 1 means a 3x3 grid, 2 means a 5x5 grid, etc.
 * @returns {HTMLCanvasElement} A new canvas element with the denoised image.
 */
function processImage(originalImg, neighborhoodSize = 1) {
    // 1. Create a canvas and draw the original image onto it.
    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;
    ctx.drawImage(originalImg, 0, 0);

    // 2. Get the pixel data from the canvas.
    const originalImageData = ctx.getImageData(0, 0, width, height);
    const originalData = originalImageData.data;
    const resultImageData = ctx.createImageData(width, height);
    const resultData = resultImageData.data;

    // Ensure neighborhood size is a non-negative integer.
    neighborhoodSize = Math.max(0, Math.floor(neighborhoodSize));

    // 3. Iterate through each pixel of the image.
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            
            // a. Define the boundaries of the neighborhood, clamping to the image edges.
            const startX = Math.max(0, x - neighborhoodSize);
            const startY = Math.max(0, y - neighborhoodSize);
            const endX = Math.min(width - 1, x + neighborhoodSize);
            const endY = Math.min(height - 1, y + neighborhoodSize);

            // b. Use a Map to count the frequency of each color in the neighborhood.
            const colorFrequency = new Map();

            // c. Loop through each pixel in the neighborhood.
            for (let ny = startY; ny <= endY; ny++) {
                for (let nx = startX; nx <= endX; nx++) {
                    const index = (ny * width + nx) * 4;
                    const r = originalData[index];
                    const g = originalData[index + 1];
                    const b = originalData[index + 2];
                    
                    // a string key is an easy way to represent the color for the map.
                    const colorKey = `${r},${g},${b}`;

                    // d. Increment the count for the color.
                    colorFrequency.set(colorKey, (colorFrequency.get(colorKey) || 0) + 1);
                }
            }

            // e. Find the color with the highest frequency (the mode).
            let dominantColorKey = '';
            let maxCount = 0;
            for (const [colorKey, count] of colorFrequency.entries()) {
                if (count > maxCount) {
                    maxCount = count;
                    dominantColorKey = colorKey;
                }
            }
            
            // f. Parse the dominant color and apply it to the corresponding pixel in the result data.
            const [r, g, b] = dominantColorKey.split(',').map(Number);
            const targetIndex = (y * width + x) * 4;
            
            resultData[targetIndex] = r;
            resultData[targetIndex + 1] = g;
            resultData[targetIndex + 2] = b;
            resultData[targetIndex + 3] = originalData[targetIndex + 3]; // Preserve original alpha
        }
    }

    // 4. Put the processed pixel data back onto the canvas.
    ctx.putImageData(resultImageData, 0, 0);

    // 5. Return the canvas element.
    return canvas;
}