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

10
main.js
View file

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

8
style.css
View file

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