pixelstats / public / script.js

const MAX_PIXELS = 80;
const sizeText = document.getElementById("size-text");
sizeText.innerHTML = "(< " + MAX_PIXELS + "px)";
const dropload = document.getElementById("dropload");

// drop event
dropload.addEventListener("drop", dropHandler);
window.addEventListener("drop", (e) => {
	if ([...e.dataTransfer.items].some((item) => item.kind === "file")) {
		e.preventDefault();
	}
});

// dragover event
dropload.addEventListener("dragover", (e) => {
	const fileItems = [...e.dataTransfer.items].filter(
		(item) => item.kind === "file",
	);
	if (fileItems.length > 0) {
		e.preventDefault();
		if (fileItems.some((item) => item.type.startsWith("image/"))) {
			e.dataTransfer.dropEffect = "copy";
		} else {
			e.dataTransfer.dropEffect = "none";
		}
	}
});
window.addEventListener("dragover", (e) => {
	const fileItems = [...e.dataTransfer.items].filter(
		(item) => item.kind === "file",
	);
	if (fileItems.length > 0) {
		e.preventDefault();
		if (!dropload.contains(e.target)) {
			e.dataTransfer.dropEffect = "none";
		}
	}
});

const preview = document.getElementById("preview");

function displayImages(files) {
	for (const file of files) {
		if (file.type.startsWith("image/")) {
			const li = document.createElement("li");
			const img = document.createElement("img");
			img.src = URL.createObjectURL(file);
			img.onload = function() {
				// don't allow images bigger than max
				if (this.width <= MAX_PIXELS && this.height <= MAX_PIXELS) {
					img.alt = file.name;
					li.classList.add('clickable');
					li.appendChild(img);
					li.appendChild(document.createTextNode(" click to get pixelstats"));
					li.addEventListener("click", (e) => {
						getPixelStats(e, file)
					});
				} else {
					li.appendChild(document.createTextNode('file \"' + file.name + '\" is bigger than ' + MAX_PIXELS + 'px'));
				}
				preview.appendChild(li);
			}
		}
	}
}

function dropHandler(e) {
	e.preventDefault();
	const files = [...e.dataTransfer.items]
		.map((item) => item.getAsFile())
		.filter((file) => file);
	displayImages(files);
}

const fileInput = document.getElementById("file-input");
fileInput.addEventListener("change", (e) => {
	displayImages(e.target.files);
});

// clear button
const clearButton = document.getElementById("clear");
clearButton.addEventListener("click", () => {
	for (const img of preview.querySelectorAll("img")) {
		URL.revokeObjectURL(img.src);
	}
	preview.textContent = "";
});

// show pixel stats
const stats = document.getElementById("stats");

function getPixelStats(e, file) {
	stats.innerHTML = "";
	const formData = new FormData();
	formData.append('image', file);
	const element = e.target;

	fetch('/process-pixels', {
		method: 'POST',
		body: formData
	}).then(
		response => response.json()
	).then(
		success => {
			const data = JSON.parse(success.processed);
			console.log(data);
			let colorTable = '<table>';
			for (const [color, count] of Object.entries(data.colors.colorsDistributionSorted)) {
				colorTable += '<tr><td style="width:50px;background-color:rgba(' + color + ')" data-color=' + color + ' title="rgba(' + color +
					')"> </td><td data-color=' + count + '>' + count + ' (' + (count / (data.width * data.height) * 100).toFixed(3) + '%)</tr>';
			}
			colorTable += '</table>';
			stats.innerHTML = '<h3>file stats</h3><table><tr>' +
				'<th>name</th><td>' + data.fileName +
				'</td></tr><tr><th>size</th><td>' + data.fileSize +
				'</td></tr><tr><th>type</th><td>' + data.fileType +
				'</td></tr><tr><th>width</th><td>' + data.width +
				'</td></tr><tr><th>height</th><td>' + data.height +
				'</td></tr></table><h3>pixel color distribution</h3>' + colorTable;
		}
	).catch(
		error => console.log(error)
	);
};