JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas"></canvas>
<br/>
<button id="btn">Pixelar</button>

JavaScript

function pixelar(imgdata,w,h,pixeles){
    if (pixeles<=1) return imgdata;
    var data=imgdata.data;
    for(var y = 0; y < w; y += pixeles)
    {
        for(var x = 0; x < w; x += pixeles)
        {
            var cont=0, rojo=0, verde=0, azul=0;
            for(var n = 0; n < pixeles; n++)
            {
                for(var m = 0; m < pixeles; m++)
                {
                    if(x + m < w && y + n < h)
                    {
                        rojo+=data[((w * (y + n)) + (x + m)) * 4];
                        verde+=data[((w * (y + n)) + (x + m)) * 4 + 1];
                        azul+=data[((w * (y + n)) + (x + m)) * 4 + 2];
                        cont++;
                    }
                }
            }
            rojo = Math.round(rojo/cont);
            verde = Math.round(verde/cont);
            azul = Math.round(azul/cont);      
            for(var n = 0; n < pixeles; n++)
            {
                for(var m = 0; m < pixeles; m++)
                {
                    if(x + m < w)
                    {
                        data[((w * (y + n)) + (x + m)) * 4] = rojo;
                        data[((w * (y + n)) + (x + m)) * 4 + 1] = verde;
                        data[((w * (y + n)) + (x + m)) * 4 + 2] = azul;
                    }
                }
            }
        }
    }
    return imgdata;
};

var img=new Image();
img.onload=function(){
    var tamanoPixeles=50;
    
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    canvas.width=img.width;
    canvas.height=img.height;
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    
    var btn=document.getElementById("btn");
    btn.onclick=function(){
        btn.setAttribute("disabled","disabled");
        var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        console.time("a");
        ctx.putImageData(pixelar(imageData,canvas.width,canvas.height,50), 0, 0);
        console.timeEnd("a");
   ...