From 015ff77123ccc3e95d6422424dac2ed8d0cf963e Mon Sep 17 00:00:00 2001
From: Orangerot <purple@orangerot.dev>
Date: Fri, 6 Dec 2024 19:06:31 +0100
Subject: feat: load and display image with correct scaling

---
 main.js | 34 +++++++++++++++++++++++++++++++---
 1 file changed, 31 insertions(+), 3 deletions(-)

(limited to 'main.js')

diff --git a/main.js b/main.js
index f620d8b..95c0558 100644
--- a/main.js
+++ b/main.js
@@ -1,6 +1,34 @@
-document.addEventListener("DOMContentLoaded", main)
+let canvas, imports;
 
-function main() {
+// wait for site to be parsed so element can be found
+document.addEventListener("DOMContentLoaded", function () {
+  // bind listeners
+  document.getElementById("take-picture").addEventListener("click", take_picture);
+  document.getElementById("upload-image").addEventListener("change", upload_image)
+
+  canvas = document.getElementById("myCanvas");
+  imports = document.getElementById("imports");
+})
+
+function take_picture() {
+  canvas.classList.remove("is-hidden");
+  imports.classList.add("is-hidden");
+
+}
+
+function upload_image(event) {
+  canvas.classList.remove("is-hidden");
+  imports.classList.add("is-hidden");
+  console.log(this.files[0]);
+
+  const img = new Image();
+  const ctx = canvas.getContext("2d");
+  img.src = URL.createObjectURL(this.files[0]);
+  img.onload = function() {
+    canvas.width = img.naturalWidth;
+    canvas.height = img.naturalHeight;
+    ctx.drawImage(img, 0, 0, canvas.width, canvas.height); 
+  }
+}
 
 
-}
\ No newline at end of file
-- 
cgit v1.2.3