Minetest-WorldEditAdditions/.docs/img2brush/img2brush.js

window.addEventListener("load", () => {
	let dropzone = document.querySelector("#dropzone");
	dropzone.addEventListener("dragenter", handle_drag_enter);
	dropzone.addEventListener("dragleave", handle_drag_leave);
	dropzone.addEventListener("dragover", handle_drag_over);
	dropzone.addEventListener("drop", handle_drop);
	
	document.querySelector("#brushimg-tsv").addEventListener("click", select_output);
	let button_copy = document.querySelector("#brushimg-copy")
	button_copy.addEventListener("click", () => {
		select_output();
		button_copy.innerHTML = document.execCommand("copy") ? "Copied!" : "Failed to copy :-(";
	})
});

function select_output() {
	let output = document.querySelector("#brushimg-tsv");
	
	let selection = window.getSelection();
	
	if (selection.rangeCount > 0)
		selection.removeAllRanges();

	let range = document.createRange();
	range.selectNode(output);
	selection.addRange(range);
}


function handle_drag_enter(event) {
	event.target.classList.add("dropzone-active");
}
function handle_drag_leave(event) {
	event.target.classList.remove("dropzone-active");
}

function handle_drag_over(event) {
	event.preventDefault();
}

function handle_drop(event) {
	event.stopPropagation();
	event.preventDefault();
	event.target.classList.remove("dropzone-active");
	
	let image_file = null;
	
	image_file = event.dataTransfer.files[0];
	
	let reader = new FileReader();
	reader.addEventListener("load", function(_event) {
		let image = new Image();
		image.src = reader.result;
		image.addEventListener("load", () => handle_new_image(image));
		
		
		document.querySelector("#brushimg-preview").src = image.src;
	});
	reader.readAsDataURL(image_file);
	
	return false;
}

function image2pixels(image) {
	let canvas = document.createElement("canvas"),
		ctx = canvas.getContext("2d");
	
	canvas.width = image.width;
	canvas.height = image.height;
	
	ctx.drawImage(image, 0, 0);
	
	return ctx.getImageData(0, 0, image.width, image.height);
}

function handle_new_image(image) {
	let tsv = pixels2tsv(image2pixels(image));
	document.querySelector("#brushimg-stats").value = `${image.width} x ${image.height} | ${image.width * image.height} pixels`;
	document.querySelector("#brushimg-tsv").value = tsv;
}

function pixels2tsv(pixels) {
	let result = "";
	for(let y = 0; y < pixels.height; y++) {
		let row = [];
		for(let x = 0; x < pixels.width; x++) {
			// No need to rescale here - this is done automagically by WorldEditAdditions.
			row.push(pixels.data[((y*pixels.width + x) * 4) + 3] / 255);
		}
		result += row.join(`\t`) + `\n`;
	}
	return result;
}