JSFiddle - React, Tailwind, and code Playground

HTML

<input type = "file" id = "file" accept = "image/jpeg,image/png,image/gif" onchange = "openImage();"/>

JavaScript

function pixelize(data) {
	var cellSize = ~~(Math.max(data.width, data.height) / 10);

	var width = data.width / cellSize;
	var height = data.height / cellSize;

	var k = 4 * cellSize;
	var l = k * data.width;
	var m = 4 * data.width;
	var q = m * data.height

	for (var x = 0; x < width; ++x) {
		for (var y = 0; y < height; ++y) {
			var R = 0, G = 0, B = 0, n = 0;

			for (var X = x * k; X < (x + 1) * k && X < m; X += 4) {
				for (var Y = y * l; Y < (y + 1) * l && Y < q; Y += m) {
					R += data.data[X + Y];
					G += data.data[X + Y + 1];
					B += data.data[X + Y + 2];
					n += 1;
				}
			}

			R /= n;
			G /= n;
			B /= n;

			for (var X = x * k; X < (x + 1) * k && X < m; X += 4) {
				for (var Y = y * l; Y < (y + 1) * l && Y < q; Y += m) {
					data.data[X + Y] = R;
					data.data[X + Y + 1] = G;
					data.data[X + Y + 2] = B;
				}
			}
		}
	}

	return data;
}

var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");

var image = new Image();
var reader = new FileReader();

image.onload = function () {
	canvas.width = image.width;
	canvas.height = image.height;

	context.drawImage(image, 0, 0);
	context.putImageData(pixelize(context.getImageData(0, 0, image.width, image.height)), 0, 0);

    alert(0);
	window.location = canvas.toDataURL("image/png");
};

reader.onload = function () {
	image.src = reader.result;
};

function openImage(e) {
	if (this.files.length > 0) reader.readAsDataURL(this.files[0]);
};