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

feat: apply image filters

Browse source
This commit is contained in:
Orangerot 2024-12-08 02:59:45 +01:00
parent 4ec96e68d1
commit 9fdb7856ed
2 changed files with 84 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
index.html
View file

@ -60,17 +60,17 @@
<div class="control">
<input type="range"
id="brightness"
class="slider is-fullwidth is-primary"
min="0" max="100" value="50" step="1">
class="brightness slider is-fullwidth is-primary"
min="0" max="2" value="1" step="0.1">
</div>
</div>
<div class="field">
<label class="label">Saturation</label>
<div class="control">
<input type="range"
id="saturation"
class="slider is-fullwidth is-primary"
min="0" max="100" value="50" step="1">
id="saturate"
class="saturate slider is-fullwidth is-primary"
min="0" max="2" value="1" step="0.1">
</div>
</div>
<div class="field">
@ -78,8 +78,8 @@
<div class="control">
<input type="range"
id="contrast"
class="slider is-fullwidth is-primary"
min="0" max="100" value="50" step="1">
class="contrast slider is-fullwidth is-primary"
min="0" max="2" value="1" step="0.1">
</div>
</div>
@ -89,6 +89,15 @@
<p class="menu-label">
Blur and Sharpen
</p>
<div class="field">
<label class="label">Blur</label>
<div class="control">
<input type="range"
id="blur"
class="blur slider is-fullwidth is-primary"
min="0" max="20" value="0" step="1">
</div>
</div>
</aside>
</div>
</div>
@ -103,43 +112,52 @@
</button>
<p class="menu-label">
Color Correction
Color Correction
</p>
<div class="field">
<label class="label">Brightness</label>
<div class="control">
<input type="range"
id="slider0"
class="slider is-fullwidth is-primary"
min="0" max="100" value="50" step="1">
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">Saturation</label>
<div class="control">
<input type="range"
id="slider0"
class="slider is-fullwidth is-primary"
min="0" max="100" value="50" step="1">
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">Contrast</label>
<div class="control">
<input type="range"
id="slider0"
class="slider is-fullwidth is-primary"
min="0" max="100" value="50" step="1">
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
Distortion
</p>
<p class="menu-label">
Blur and Sharpen
Blur and Sharpen
</p>
<div class="field">
<label class="label">Blur</label>
<div class="control">
<input type="range"
id="blur"
class="blur slider is-fullwidth is-primary"
min="0" max="20" value="0" step="1">
</div>
</div>
</div>
</body>
</html>

56
main.js
View file

@ -1,17 +1,37 @@
let canvas, imports;
let canvas;
let ctx;
let imports;
let settings = {
brightness: {},
saturate: {},
contrast: {},
blur: {prefix: 'px'}
};
const img = new Image();
// wait for site to be parsed so element can be found
document.addEventListener("DOMContentLoaded", function () {
document.addEventListener("DOMContentLoaded", function() {
canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
imports = document.getElementById("imports");
// bind listeners
document.getElementById("take-picture").addEventListener("click", take_picture);
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");
imports = document.getElementById("imports");
for (let setting in settings) {
// make an array out of an iterable
const elements = [...document.getElementsByClassName(setting)];
settings[setting].elements = elements;
for (let element of elements) {
element.addEventListener("input", settings_apply);
}
}
})
function take_picture() {
@ -20,18 +40,16 @@ function take_picture() {
}
function upload_image(event) {
function upload_image() {
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);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}
}
@ -47,3 +65,23 @@ function save_image() {
function share_image() {
}
function settings_apply(event) {
const changed_setting = event.target.id;
const new_value = event.target.value;
// update all inputs for that setting (mobile and desktop) to the new value
for (let element of settings[changed_setting].elements) {
if (element == event.target) continue;
element.value = new_value;
}
const filter = Object.entries(settings)
.map(([setting, {elements, prefix}]) => `${setting}(${elements[0].value}${prefix || ""})`)
.join(" ")
ctx.filter = filter
console.log(filter);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}