imagine

commit 015ff77123ccc3e95d6422424dac2ed8d0cf963e
parent 037f30fe8bec7265db275227596b0f4eb776f671
Author: Orangerot <purple@orangerot.dev>
Date:   Fri,  6 Dec 2024 19:06:31 +0100

feat: load and display image with correct scaling

Diffstat:
M
index.html
 | 
16
++++++++--------
M
main.js
 | 
35
+++++++++++++++++++++++++++++++----
M
style.css
 | 
5
+++++

3 files changed, 44 insertions(+), 12 deletions(-)
diff --git a/index.html b/index.html
@@ -15,20 +15,20 @@
         <div class="hero is-fullheight">
           <div class="hero-body">
             <div class="container">
-              <div class="columns is-mobile">
+              <canvas id="myCanvas" class="is-hidden" width="300" height="300"></canvas>
+              <div id="imports" class="columns is-mobile">
                 <div class="column">
-                  <button 
-                     class="button is-large is-fullwidth" 
-                     style="padding: 100% 0 100% 0">
+                  <button id="take-picture" 
+                     class="button is-large is-responsive is-fullwidth">
                     Take a Picture
                   </button>
                 </div>
                 <div class="column">
-                  <button 
-                     class="button is-large is-fullwidth"
-                     style="padding: 100% 0 100% 0">
+                  <label for="upload-image"
+                     class="button is-large is-responsive is-fullwidth">
                     Upload an Image
-                  </button>
+                  </label>
+                  <input type="file" id="upload-image" accept="image/*" style="display: none">
                 </div>
               </div>
             </div><br>
diff --git 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
diff --git a/style.css b/style.css
@@ -2,3 +2,8 @@ html, body {
   margin: 0px;
   scroll-behavior: smooth;
 }
+
+canvas {
+  max-width: 100%;
+  max-height: 100%;
+}