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

feat: download canvas image

Browse source
This commit is contained in:
Orangerot 2024-12-07 20:24:16 +01:00
parent 686e314d6a
commit 4ec96e68d1
2 changed files with 22 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
index.html
View file

@ -44,10 +44,10 @@
<h1 class="title">Imagine</h1> <h1 class="title">Imagine</h1>
<h2 class="subtitle">Image Editor</h2> <h2 class="subtitle">Image Editor</h2>
<button class="button is-primary"> <button id="save" class="button is-primary">
Save Image Save Image
</button> </button>
<button class="button is-secondary"> <button id="share" class="button is-secondary">
Share Share
</button> </button>
@ -59,7 +59,7 @@
<label class="label">Brightness</label> <label class="label">Brightness</label>
<div class="control"> <div class="control">
<input type="range" <input type="range"
id="slider0" id="brightness"
class="slider is-fullwidth is-primary" class="slider is-fullwidth is-primary"
min="0" max="100" value="50" step="1"> min="0" max="100" value="50" step="1">
</div> </div>
@ -68,7 +68,7 @@
<label class="label">Saturation</label> <label class="label">Saturation</label>
<div class="control"> <div class="control">
<input type="range" <input type="range"
id="slider0" id="saturation"
class="slider is-fullwidth is-primary" class="slider is-fullwidth is-primary"
min="0" max="100" value="50" step="1"> min="0" max="100" value="50" step="1">
</div> </div>
@ -77,7 +77,7 @@
<label class="label">Contrast</label> <label class="label">Contrast</label>
<div class="control"> <div class="control">
<input type="range" <input type="range"
id="slider0" id="contrast"
class="slider is-fullwidth is-primary" class="slider is-fullwidth is-primary"
min="0" max="100" value="50" step="1"> min="0" max="100" value="50" step="1">
</div> </div>
@ -95,10 +95,10 @@
<div class="notification is-fullwidth is-hidden-desktop" style="z-index: 200"> <div class="notification is-fullwidth is-hidden-desktop" style="z-index: 200">
<span id="settings"></span> <span id="settings"></span>
<a href="#top" class="delete"></a> <a href="#top" class="delete"></a>
<button class="button is-primary"> <button id="save" class="button is-primary">
Save Image Save Image
</button> </button>
<button class="button is-secondary"> <button id="share" class="button is-secondary">
Share Share
</button> </button>

15
main.js
View file

@ -6,6 +6,10 @@ document.addEventListener("DOMContentLoaded", function () {
document.getElementById("take-picture").addEventListener("click", take_picture); document.getElementById("take-picture").addEventListener("click", take_picture);
document.getElementById("upload-image").addEventListener("change", upload_image) document.getElementById("upload-image").addEventListener("change", upload_image)
document.getElementById("save").addEventListener("click", save_image)
document.getElementById("share").addEventListener("click", share_image)
canvas = document.getElementById("myCanvas"); canvas = document.getElementById("myCanvas");
imports = document.getElementById("imports"); imports = document.getElementById("imports");
}) })
@ -31,4 +35,15 @@ function upload_image(event) {
} }
} }
function save_image() {
const dataUrl = canvas.toDataURL("image/png");
// downloading only works with links but not window.open
const link = document.createElement('a');
link.href = dataUrl;
link.download = 'imagine.png';
link.click();
}
function share_image() {
}