peacememories/uploading.html

## uploading.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Image Upload</title>
</head>

<body>

    <input id="file-input" type="file">
    <canvas id="canvas">
    </canvas>
    <button id="upload-button" disabled>Upload!</button>
    <script>
        const fileInput = document.querySelector("#file-input");
        const canvas = document.querySelector("#canvas");
        const button = document.querySelector("#upload-button");

        fileInput.addEventListener("change", () => {
            switch (fileInput.files.length) {
                case 0:
                    // empty selector
                    button.disabled = true;
                    break;
                case 1: {
                    const file = fileInput.files[0];
                    const reader = new FileReader();

                    reader.addEventListener("load", (e) => {
                        const image = new Image();
                        image.addEventListener("load", () => {
                            if (image.width < 128 || image.height < 64) {
                                console.error("Image too small!");
                                button.disabled = true;
                                return;
                            }
                            canvas.width = image.width;
                            canvas.height = image.height;
                            const context = canvas.getContext("2d");
                            context.drawImage(image, 0, 0);
                            const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
                            const data = imageData.data;
                            for (let i = 0; i < data.length; i += 4) {
                                const brightness = (data[i] + data[i + 1] + data[i + 2]) / 3;
                                const bw = brightness >= 128 ? 255 : 0;
                                data[i] = bw;
                                data[i + 1] = bw;
                                data[i + 2] = bw;
                            }
                            context.putImageData(imageData, 0, 0);
                            button.disabled = false;
                        })
                        image.src = e.target.result;
                    });
                    reader.readAsDataURL(file);
                    break;
                }
                default:
                    console.error("Too many files supplied, something went wrong!");
                    button.disabled = true;
            }
        });

        button.addEventListener("click", () => {
            const imageData = canvas.getContext("2d").getImageData(0, 0, 128, 64);
            if (imageData.width < 128 || imageData.height < 64) {
                console.error("Image is not big enough")
                button.disabled = true;
                return;
            }

            const output = new Uint8Array(1024);
            const data = imageData.data;
            let index = 0;
            for (let y = 0; y < 64; y++) {
                for (let x = 0; x < 128; x += 8) {
                    let byte = 0;
                    for (let offset = 0; offset < 8; offset++) {
                        byte *= 2;
                        byte += data[4 * (128 * y + x + offset)] > 0 ? 1 : 0;
                    }
                    output[index] = byte;
                    index++;
                }
            }
            console.log(output);
            // const request = new XMLHttpRequest();
            // request.open("POST", "/image", true);
            // request.addEventListener("load", () => {
            //     console.log("uploaded");
            // });
            const request = new Request("/image", {
                method: "POST",
                body: new Blob(output, { type: "application/octet-stream" })
            });
            console.log(new Blob(output));
            fetch(request);

            // request.send(new Blob(output, { type: "application/octet-stream" }));
        });
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Image Upload</title>
	</head>

	<body>

	<input id="file-input" type="file">
	<canvas id="canvas">
	</canvas>
	<button id="upload-button" disabled>Upload!</button>
	<script>
	const fileInput = document.querySelector("#file-input");
	const canvas = document.querySelector("#canvas");
	const button = document.querySelector("#upload-button");

	fileInput.addEventListener("change", () => {
	switch (fileInput.files.length) {
	case 0:
	// empty selector
	button.disabled = true;
	break;
	case 1: {
	const file = fileInput.files[0];
	const reader = new FileReader();

	reader.addEventListener("load", (e) => {
	const image = new Image();
	image.addEventListener("load", () => {
	if (image.width < 128 \|\| image.height < 64) {
	console.error("Image too small!");
	button.disabled = true;
	return;
	}
	canvas.width = image.width;
	canvas.height = image.height;
	const context = canvas.getContext("2d");
	context.drawImage(image, 0, 0);
	const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
	const data = imageData.data;
	for (let i = 0; i < data.length; i += 4) {
	const brightness = (data[i] + data[i + 1] + data[i + 2]) / 3;
	const bw = brightness >= 128 ? 255 : 0;
	data[i] = bw;
	data[i + 1] = bw;
	data[i + 2] = bw;
	}
	context.putImageData(imageData, 0, 0);
	button.disabled = false;
	})
	image.src = e.target.result;
	});
	reader.readAsDataURL(file);
	break;
	}
	default:
	console.error("Too many files supplied, something went wrong!");
	button.disabled = true;
	}
	});

	button.addEventListener("click", () => {
	const imageData = canvas.getContext("2d").getImageData(0, 0, 128, 64);
	if (imageData.width < 128 \|\| imageData.height < 64) {
	console.error("Image is not big enough")
	button.disabled = true;
	return;
	}

	const output = new Uint8Array(1024);
	const data = imageData.data;
	let index = 0;
	for (let y = 0; y < 64; y++) {
	for (let x = 0; x < 128; x += 8) {
	let byte = 0;
	for (let offset = 0; offset < 8; offset++) {
	byte *= 2;
	byte += data[4 * (128 * y + x + offset)] > 0 ? 1 : 0;
	}
	output[index] = byte;
	index++;
	}
	}
	console.log(output);
	// const request = new XMLHttpRequest();
	// request.open("POST", "/image", true);
	// request.addEventListener("load", () => {
	// console.log("uploaded");
	// });
	const request = new Request("/image", {
	method: "POST",
	body: new Blob(output, { type: "application/octet-stream" })
	});
	console.log(new Blob(output));
	fetch(request);

	// request.send(new Blob(output, { type: "application/octet-stream" }));
	});
	</script>
	</body>

	</html>