diff --git a/index.html b/index.html
index 613dcb7..e72d6fc 100644
--- a/index.html
+++ b/index.html
@@ -13,11 +13,16 @@
Imagine - Image Editor
+
+
+
diff --git a/main.js b/main.js
index 0fde283..4c88716 100644
--- a/main.js
+++ b/main.js
@@ -1,11 +1,15 @@
let canvas;
let video;
let ctx;
+/*
+ * theses settings correspond to a css-filter. you can specify an optional
+ * filter attribute to modify the value from the input element.
+ */
let settings = {
"brightness": {},
"saturate": {},
"contrast": {},
- "hue-rotate": {filter: value => value + "deg"},
+ "hue-rotate": { filter: value => value + "deg" },
"grayscale": {},
"sepia": {},
"invert": {},
@@ -111,6 +115,11 @@ document.addEventListener("DOMContentLoaded", function() {
}
});
+/**
+ * Reset all inputs of a setting back to the default value
+ *
+ * @param {string} setting - key of the settings object to reset
+ */
function reset_all(setting) {
console.log("reseting " + setting);
for (let element of settings[setting].elements) {
@@ -119,6 +128,10 @@ function reset_all(setting) {
draw(true);
}
+/**
+ * Request camera access and on succhess, show camera feed on video-element and
+ * switch to camera-active view
+ */
function use_camera() {
navigator.mediaDevices
.getUserMedia({ video: true, audio: false })
@@ -132,6 +145,10 @@ function use_camera() {
});
}
+/**
+ * Take a still frame of the video-element showing the camera-feed and load it
+ * to the img to be rendered by canvas and switch to editor-active view
+ */
function take_picture() {
canvas.width = video.width;
canvas.height = video.height;
@@ -142,6 +159,10 @@ function take_picture() {
document.body.className = "editor-active";
}
+/**
+ * Load selected file by input element to img to be rendered by canvas and
+ * switch to editor-active view
+ */
function upload_image() {
document.body.className = "editor-active";
@@ -151,7 +172,14 @@ function upload_image() {
img.onload = () => draw(true);
}
-// https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
+/**
+ * Get file that is dropped into the website and load it to img to be rendered
+ * by canvas and switch to editor-active view.
+ *
+ * @param {DragEvent} ev -supplier by event listener
+ *
+ * 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;
@@ -170,6 +198,12 @@ function drop_handler(ev) {
img.onload = () => draw(true);
}
+/**
+ * Creates a download of the edited image in full resolution by creating a link
+ * and virtually clicking it.
+ *
+ * @param {PointerEvent} event - supplied by event listener
+ */
function save_image(event) {
event.preventDefault();
draw(false);
@@ -182,6 +216,11 @@ function save_image(event) {
link.click();
}
+/**
+ * Uses the navigator.share API to share the edited image in full reslution.
+ *
+ * @param {PointerEvent} event - supplied by event listener
+ */
function share_image(event) {
event.preventDefault();
if (!navigator.share) {
@@ -201,6 +240,11 @@ function share_image(event) {
}, 'image/png');
}
+/**
+ * Set all inputs of a setting to the value of the input that changed it.
+ *
+ * @param {Event} event - supplied by event listener
+ */
function settings_apply(event) {
const changed_setting = event.target.id;
const new_value = event.target.value;
@@ -214,7 +258,13 @@ function settings_apply(event) {
draw(true);
}
-// https://www.shadertoy.com/view/ldSXWK
+/**
+ * Render a lensflare shader for every pixel on the canvas.
+ *
+ * @param {number} pos_x - x position of the lensflare in the range [-0.5,0.5]
+ * @param {number} pos_y - y position of the lensflare in the range [-0.5,0.5]
+ * https://www.shadertoy.com/view/ldSXWK
+ */
function lensflare(pos_x, pos_y) {
const imgdata = ctx.getImageData(0, 0, canvas.width, canvas.height);
const pixel_count = imgdata.data.length / 4;
@@ -276,6 +326,13 @@ function lensflare(pos_x, pos_y) {
ctx.putImageData(imgdata, 0, 0);
}
+/**
+ * Amply filters and lensflare to the optionally scaled image, to only
+ * calculate on pixels the user can see.
+ *
+ * @param {bool} viewport_scale - render image scaled to viewport or in full
+ * resolution
+ */
function draw(viewport_scale) {
const filter = Object.entries(settings)
.map(([setting, { elements, filter }]) => `${setting}(${filter(elements[0].value)})`)
diff --git a/style.css b/style.css
index 85a8268..4798e74 100644
--- a/style.css
+++ b/style.css
@@ -1,4 +1,4 @@
-html, body {
+body {
margin: 0px;
scroll-behavior: smooth;
padding-top: 100dvh;