paper?

web/script.js

@@ -0,0 +1,69 @@
+import init, { dctify, resize } from './pkg/image_similarity.js';
+
+async function run() {
+	await init();
+}
+run();
+const resizeWorker = new Worker("resize.js", { type: 'module' });
+
+let imageContainers = document.getElementsByClassName("image-original");
+let resizedImageContainer = document.getElementById("image-resize");
+let dctCoefficientContainer = document.getElementById("image-dct");
+let formImage = document.getElementById("dctimage");
+
+let originalImage = document.createElement("img");
+let resizedBuffer = null;
+
+// Uses the resized buffer to get DCT coefficients
+function getDCT() {
+	let buf = new Uint8Array(resizedBuffer)
+	let dct = dctify(buf);
+
+	for (const c of dct) {
+		let cdiv = document.createElement("div");
+		cdiv.innerHTML = c.toFixed(1);
+		dctCoefficientContainer.appendChild(cdiv);
+	}
+}
+
+// Resets all containers, deletes images, etc
+// Redefines the event handlers for the base image
+function reset() {
+	//imageContainers.forEach((imageContainer) => {
+	for (let imageContainer of imageContainers) {
+		imageContainer.replaceChildren();
+	}
+	resizedImageContainer.replaceChildren();
+	dctCoefficientContainer.replaceChildren();
+}
+
+// Result from the resize worker, means we get resized buffer
+resizeWorker.onmessage = function (e) {
+	console.log(e.data);
+	resizedBuffer = e.data.buffer;
+	const resizedImage = document.createElement("img");
+	resizedImage.src = URL.createObjectURL(
+		new Blob([resizedBuffer], { type: 'image/png' })
+	);
+	resizedImageContainer.appendChild(resizedImage);
+}
+
+// User selected an image from disk. Start the demo.
+formImage.addEventListener("change", function() {
+	reset();
+	// Should only get one file from picker
+	for (const file of formImage.files) {
+		let originalUrl = URL.createObjectURL(file);
+		for (let imageContainer of imageContainers) {
+			let originalImage = document.createElement("img");
+			originalImage.src = originalUrl;
+			imageContainer.appendChild(originalImage);
+		}
+
+		file.arrayBuffer().then((buf) => {
+			buf = new Uint8Array(buf);
+			resizeWorker.postMessage(buf);
+		});
+	}
+	document.getElementById("demo-cont").classList.add("visible");
+});