university/Imagine
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat: load image by dragging it into viewport

Browse source
This commit is contained in:
Orangerot 2024-12-12 02:47:17 +01:00
parent f9b4d17140
commit e1dd8faaa5
2 changed files with 22 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -14,7 +14,7 @@
</head> </head>
<body style="padding-top: 100dvh; " class="import-active"> <body style="padding-top: 100dvh; " class="import-active">
<div class="navbar columns is-mobile is-fixed-top"> <div class="navbar columns is-mobile is-fixed-top">
<div class="column"> <div class="column" id="viewport">
<div class="hero is-fullheight" style="min-height: 100dvh;"> <div class="hero is-fullheight" style="min-height: 100dvh;">
<div class="hero-body"> <div class="hero-body">
<div class="container" > <div class="container" >

21
main.js
View file

@ -21,6 +21,8 @@ document.addEventListener("DOMContentLoaded", function() {
document.getElementById("back").addEventListener("click", () => document.body.className = "import-active"); document.getElementById("back").addEventListener("click", () => document.body.className = "import-active");
// bind listeners // bind listeners
document.getElementById("viewport").addEventListener("drop", drop_handler);
document.getElementById("viewport").addEventListener("dragover", event => event.preventDefault());
document.getElementById("take-picture").addEventListener("click", use_camera); document.getElementById("take-picture").addEventListener("click", use_camera);
document.getElementById("cheese").addEventListener("click", take_picture); document.getElementById("cheese").addEventListener("click", take_picture);
document.getElementById("upload-image").addEventListener("change", upload_image) document.getElementById("upload-image").addEventListener("change", upload_image)
@ -101,6 +103,25 @@ function upload_image() {
img.onload = () => draw(true); img.onload = () => draw(true);
} }
// https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
function drop_handler(ev) {
ev.preventDefault();
let file;
if (ev.dataTransfer.items) {
const item = ev.dataTransfer.items[0];
if (item.kind !== "file") return;
file = item.getAsFile();
} else {
file = ev.dataTransfer.files[0];
}
console.log(file);
document.body.className = "editor-active";
img.src = URL.createObjectURL(file);
img.onload = () => draw(true);
}
function save_image(event) { function save_image(event) {
event.preventDefault(); event.preventDefault();
draw(false); draw(false);