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

feat: button to go back to edit another image

Browse source
This commit is contained in:
Orangerot 2024-12-10 03:14:49 +01:00
parent bd7ae62180
commit a4af4cc514
3 changed files with 153 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

267
index.html
View file

@ -11,14 +11,14 @@
<link rel="stylesheet" href="style.css">
<title>Imagine - Image Editor</title>
</head>
<body style="padding-top: 100dvh; ">
<body style="padding-top: 100dvh; " class="">
<div class="navbar columns is-mobile is-fixed-top">
<div class="column">
<div class="hero is-fullheight" style="min-height: 100dvh;">
<div class="hero-body">
<div class="container">
<canvas id="myCanvas" class="is-hidden" width="300" height="300"></canvas>
<div id="imports" class="columns is-mobile">
<canvas id="myCanvas" class="is-visible-editor" width="300" height="300"></canvas>
<div class="columns is-mobile is-hidden-editor">
<div class="column">
<button id="take-picture"
class="button is-large is-responsive is-fullwidth py-6"
@ -42,156 +42,171 @@
</div>
</div>
</div><br>
<a href="#settings" class="button is-hidden-desktop" style="position: absolute; right: 30px;
<a href="#settings" class="button is-hidden-desktop is-visible-editor" style="position: absolute; right: 30px;
bottom: 30px">
<i class="fa-solid fa-sliders mr-2"></i> Settings
</a>
<button id="back" class="button is-visible-editor" style="position: absolute; left: 30px;
top: 30px">
<i class="fa-solid fa-arrow-left mr-2"></i> Back
</button>
</div>
</div>
</div>
<div class="column is-narrow has-background-black-ter is-hidden-mobile is-hidden-tablet-only">
<div class="column is-narrow has-background-black-ter is-hidden-mobile is-hidden-tablet-only is-visible-editor">
<aside class="menu" style="width: 300px">
<h1 class="title">Imagine</h1>
<h2 class="subtitle">Image Editor</h2>
<button id="save" class="button is-primary">
Save Image
</button>
<button id="share" class="button is-secondary">
<i class="fa-solid fa-share-from-square fa-fw mr-1"></i>
Share
</button>
<!-- autocomplete off prevents browsers from remebering the value on page reloads -->
<form autocomplete="off">
<button id="save" class="button is-primary">
Save Image
</button>
<button id="share" class="button is-secondary">
<i class="fa-solid fa-share-from-square fa-fw mr-1"></i>
Share
</button>
<p class="menu-label">
<p class="menu-label">
Color Correction
</p>
</p>
<div class="field">
<label class="label">
<i class="fa-solid fa-sun fa-fw"></i>
Brightness
</label>
<div class="control">
<input type="range"
id="brightness"
class="brightness slider is-fullwidth is-primary"
min="0" max="2" value="1" step="0.1">
<div class="field">
<label class="label">
<i class="fa-solid fa-sun fa-fw"></i>
Brightness
</label>
<div class="control">
<input type="range"
id="brightness"
class="brightness slider is-fullwidth is-primary"
min="0" max="2" value="1" step="0.1">
</div>
</div>
</div>
<div class="field">
<label class="label">
<i class="fa-solid fa-leaf fa-fw"></i>
Saturation
</label>
<div class="control">
<input type="range"
id="saturate"
class="saturate slider is-fullwidth is-primary"
min="0" max="2" value="1" step="0.1">
<div class="field">
<label class="label">
<i class="fa-solid fa-leaf fa-fw"></i>
Saturation
</label>
<div class="control">
<input type="range"
id="saturate"
class="saturate slider is-fullwidth is-primary"
min="0" max="2" value="1" step="0.1">
</div>
</div>
</div>
<div class="field">
<label class="label">
<i class="fa-solid fa-circle-half-stroke fa-fw"></i>
Contrast
</label>
<div class="control">
<input type="range"
id="contrast"
class="contrast slider is-fullwidth is-primary"
min="0" max="2" value="1" step="0.1">
<div class="field">
<label class="label">
<i class="fa-solid fa-circle-half-stroke fa-fw"></i>
Contrast
</label>
<div class="control">
<input type="range"
id="contrast"
class="contrast slider is-fullwidth is-primary"
min="0" max="2" value="1" step="0.1">
</div>
</div>
</div>
<p class="menu-label">
<p class="menu-label">
Distortion
</p>
<p class="menu-label">
</p>
<p class="menu-label">
Blur and Sharpen
</p>
<div class="field">
<label class="label">
<i class="fa-solid fa-water fa-fw"></i>
Blur
</label>
<div class="control">
<input type="range"
id="blur"
class="blur slider is-fullwidth is-primary"
min="0" max="1" value="0" step="0.05">
</p>
<div class="field">
<label class="label">
<i class="fa-solid fa-water fa-fw"></i>
Blur
</label>
<div class="control">
<input type="range"
id="blur"
class="blur slider is-fullwidth is-primary"
min="0" max="1" value="0" step="0.05">
</div>
</div>
</div>
</form>
</aside>
</div>
</div>
<div class="notification is-fullwidth is-hidden-desktop" style="z-index: 200">
<button id="save" class="button is-primary">
Save Image
</button>
<button id="share" class="button is-secondary">
<i class="fa-solid fa-share-from-square fa-fw mr-1"></i>
Share
</button>
<div class="notification is-fullwidth is-hidden-desktop is-visible-editor" style="z-index: 200">
<!-- #settings is an anhor to scroll to when clicked on the settings-button -->
<span id="settings"></span>
<!-- #top is an anchor provided by the browser to go to the top of the page -->
<a href="#top" class="delete"></a>
<p class="menu-label">
Color Correction
</p>
<!-- autocomplete off prevents browsers from remebering the value on page reloads -->
<form autocomplete="off">
<button id="save" class="button is-primary">
Save Image
</button>
<button id="share" class="button is-secondary">
<i class="fa-solid fa-share-from-square fa-fw mr-1"></i>
Share
</button>
<div class="field">
<label class="label">
<i class="fa-solid fa-sun fa-fw"></i>
Brightness
</label>
<div class="control">
<input type="range"
id="brightness"
class="brightness slider is-fullwidth is-primary"
min="0" max="2" value="1" step="0.1">
</div>
</div>
<div class="field">
<label class="label">
<i class="fa-solid fa-leaf fa-fw"></i>
Saturation
</label>
<div class="control">
<input type="range"
id="saturate"
class="saturate slider is-fullwidth is-primary"
min="0" max="2" value="1" step="0.1">
</div>
</div>
<div class="field">
<label class="label">
<i class="fa-solid fa-circle-half-stroke fa-fw"></i>
Contrast
</label>
<div class="control">
<input type="range"
id="contrast"
class="contrast slider is-fullwidth is-primary"
min="0" max="2" value="1" step="0.1">
</div>
</div>
<p class="menu-label">
Color Correction
</p>
<p class="menu-label">
Distortion
</p>
<p class="menu-label">
Blur and Sharpen
</p>
<div class="field">
<label class="label">
<i class="fa-solid fa-water fa-fw"></i>
Blur
</label>
<div class="control">
<input type="range"
id="blur"
class="blur slider is-fullwidth is-primary"
min="0" max="1" value="0" step="0.05">
<div class="field">
<label class="label">
<i class="fa-solid fa-sun fa-fw"></i>
Brightness
</label>
<div class="control">
<input type="range"
id="brightness"
class="brightness slider is-fullwidth is-primary"
min="0" max="2" value="1" step="0.1">
</div>
</div>
</div>
<div class="field">
<label class="label">
<i class="fa-solid fa-leaf fa-fw"></i>
Saturation
</label>
<div class="control">
<input type="range"
id="saturate"
class="saturate slider is-fullwidth is-primary"
min="0" max="2" value="1" step="0.1">
</div>
</div>
<div class="field">
<label class="label">
<i class="fa-solid fa-circle-half-stroke fa-fw"></i>
Contrast
</label>
<div class="control">
<input type="range"
id="contrast"
class="contrast slider is-fullwidth is-primary"
min="0" max="2" value="1" step="0.1">
</div>
</div>
<p class="menu-label">
Distortion
</p>
<p class="menu-label">
Blur and Sharpen
</p>
<div class="field">
<label class="label">
<i class="fa-solid fa-water fa-fw"></i>
Blur
</label>
<div class="control">
<input type="range"
id="blur"
class="blur slider is-fullwidth is-primary"
min="0" max="1" value="0" step="0.05">
</div>
</div>
</form>
</div>
</body>
</html>

10
main.js
View file

@ -1,6 +1,5 @@
let canvas;
let ctx;
let imports;
let settings = {
brightness: {},
saturate: {},
@ -13,7 +12,7 @@ const img = new Image();
document.addEventListener("DOMContentLoaded", function() {
canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
imports = document.getElementById("imports");
document.getElementById("back").addEventListener("click", () => document.body.classList.remove("editor-enabled"));
// bind listeners
document.getElementById("take-picture").addEventListener("click", take_picture);
@ -38,14 +37,13 @@ document.addEventListener("DOMContentLoaded", function() {
})
function take_picture() {
canvas.classList.remove("is-hidden");
imports.classList.add("is-hidden");
document.body.classList.add("editor-enabled");
}
function upload_image() {
canvas.classList.remove("is-hidden");
imports.classList.add("is-hidden");
document.body.classList.add("editor-enabled");
console.log(this.files[0]);
img.src = URL.createObjectURL(this.files[0]);

8
style.css
View file

@ -7,3 +7,11 @@ canvas {
max-width: 100%;
max-height: 100%;
}
body:not(.editor-enabled) .is-visible-editor {
display: none !important;
}
body.editor-enabled .is-hidden-editor {
display: none !important;
}