diff options
author | Orangerot <purple@orangerot.dev> | 2024-12-06 19:06:31 +0100 |
---|---|---|
committer | Orangerot <purple@orangerot.dev> | 2024-12-06 19:06:31 +0100 |
commit | 015ff77123ccc3e95d6422424dac2ed8d0cf963e (patch) | |
tree | 3724c5210579b02a41d65a73b7b4f28910b88f13 | |
parent | 037f30fe8bec7265db275227596b0f4eb776f671 (diff) |
feat: load and display image with correct scaling
-rw-r--r-- | index.html | 16 | ||||
-rw-r--r-- | main.js | 34 | ||||
-rw-r--r-- | style.css | 5 |
3 files changed, 44 insertions, 11 deletions
@@ -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> @@ -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 @@ -2,3 +2,8 @@ html, body { margin: 0px; scroll-behavior: smooth; } + +canvas { + max-width: 100%; + max-height: 100%; +} |