Imagine/main.js

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" },
  "grayscale": {},
  "sepia": {},
  "invert": {},
  "blur": { filter: value => value * canvas.width / 100 + 'px' }
};
const img = new Image();
let lensflare_active = false;
let cursor = {
  x: 0,
  y: 0
};

// wait for site to be parsed so element can be found
document.addEventListener("DOMContentLoaded", function() {
  canvas = document.getElementById("myCanvas");
  ctx = canvas.getContext("2d");
  video = document.getElementById("video");
  document.getElementById("back").addEventListener("click", () => document.body.className = "import-active");

  // bind listeners
  document.getElementById("viewport").addEventListener("drop", drop_handler);
  document.getElementById("viewport").addEventListener("dragover", event => event.preventDefault());
  document.getElementById("take-picture").addEventListener("click", use_camera);
  document.getElementById("cheese").addEventListener("click", take_picture);
  document.getElementById("upload-image").addEventListener("change", upload_image)

  for (let element of document.getElementsByClassName("save-image")) {
    element.addEventListener("click", save_image)
  }
  for (let element of document.getElementsByClassName("share-image")) {
    element.addEventListener("click", share_image)
  }

  for (let element of document.getElementsByClassName("lensflare")) {
    element.addEventListener("click", function(event) {
      event.preventDefault();
      lensflare_active = !lensflare_active;
      if (lensflare_active) {
        event.target.classList.add("is-primary");
      } else {
        event.target.classList.remove("is-primary");
      }
      draw(true);
    });
  }

  document.getElementById("viewport").addEventListener("mousemove", function(event) {
    if (event.buttons === 1 && lensflare_active) {
      cursor.x = (event.clientX - canvas.offsetLeft) / canvas.clientWidth - 0.5;
      cursor.y = (event.clientY - canvas.offsetTop) / canvas.clientWidth - 0.5;
      console.log(cursor);
      draw(true);
    }
  });

  window.addEventListener("deviceorientation", function(event) {
    if (lensflare_active) {
      cursor.x = event.gamma / 360 * 4;
      cursor.y = (event.beta - 90) / 360 * 4;
      console.log(cursor);
      // draw(true);
    }
  });

  function animation() {
    if (lensflare_active) {
      draw(true);
    }
    requestAnimationFrame(animation)
  };
  animation();

  window.addEventListener("resize", () => draw(true))

  video.addEventListener("canplay", function() {
    const width = 320;
    let height = video.videoHeight / (video.videoWidth / width);

    // Firefox currently has a bug where the height can't be read from
    // the video, so we will make assumptions if this happens.

      if (isNaN(height)) {
        height = width / (4 / 3);
      }
    video.width = width;
    video.height = height;
  });

  for (let setting in settings) {
    // make an array out of an iterable
    const elements = [...document.getElementsByClassName(setting)];
    settings[setting].elements = elements;
    // if filter is not definded, use identity function
    settings[setting].filter ||= value => value;
    for (let element of elements) {
      element.addEventListener("input", settings_apply);
    }

    const reset_elements = document.getElementsByClassName(setting + "-reset");
    for (let reset_element of reset_elements) {
      reset_element.addEventListener("click", () => reset_all(setting));
    }
  }
});

/**
  * 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) {
    element.value = element.defaultValue;
  }
  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 })
    .then((stream) => {
      video.srcObject = stream;
      video.play();
      document.body.className = "camera-active";
    })
    .catch((err) => {
      console.error(`An error occurred: ${err}`);
    });
}

/**
  * 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;
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  img.src = canvas.toDataURL("image/png");
  img.onload = () => draw(true);

  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";

  console.log(this.files[0]);

  img.src = URL.createObjectURL(this.files[0]);
  img.onload = () => draw(true);
}

/**
  * 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;

  if (ev.dataTransfer.items) {
    const item = ev.dataTransfer.items[0];
    if (item.kind !== "file") return;
    file = item.getAsFile();
  } else {
    file = ev.dataTransfer.files[0];
  }
  console.log(file);

  document.body.className = "editor-active";
  img.src = URL.createObjectURL(file);
  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);

  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();
}

/**
  * 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) {
    console.log("navigator.share does not exist");
    return;
  }

  canvas.toBlob(async (blob) => {
    if (!blob) return;
    const file = new File([blob], 'imagine.png', {type: 'image/png'});

    try {
      await navigator.share({files: [file]});
    } catch (error) {
      console.log('Error sharing:', error);
    }
  }, '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;

  // 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;
  }

  draw(true);
}

/**
  * 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;
  const aspect_ratio = canvas.width / canvas.height;
  for (let i = 0; i < pixel_count; i++) {
    const x = i % canvas.width;
    const y = i / canvas.width;
    const u = (x / canvas.width - .5) * aspect_ratio;
    const v = y / canvas.height - .5;

    const intensity = 1.5 * 255;
    const uv_len = u * u + v * v;
    const uvd_x = u * uv_len;
    const uvd_y = v * uv_len;
    const uvd_len = uvd_x * uvd_x + uvd_y * uvd_y;

    const uvd_pos_x = uvd_x + pos_x;
    const uvd_pos_y = uvd_y + pos_y;
    let temp = uvd_pos_x * uvd_pos_x + uvd_pos_y * uvd_pos_y
    const f2 = Math.max(1.0 / (1.0 + 32.0 * temp * .64), .0) * 0.1;
    const f22 = Math.max(1.0 / (1.0 + 32.0 * temp * .72), .0) * 0.08;
    const f23 = Math.max(1.0 / (1.0 + 32.0 * temp * .81), .0) * 0.06;

    let uvx_x = u * (1 + 0.5) + uvd_x * 0.5;
    let uvx_y = v * (1 + 0.5) + uvd_y * 0.5;
    let uvx_pos_x = uvx_x + pos_x;
    let uvx_pos_y = uvx_y + pos_y;

    temp = uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y
    const f4 = Math.max(0.01 - temp * .16, .0) * 6.0;
    const f42 = Math.max(0.01 - temp * .20, .0) * 5.0;
    const f43 = Math.max(0.01 - temp * .25, .0) * 3.0;

    uvx_x = u * (1 + 0.4) + uvd_x * 0.4;
    uvx_y = v * (1 + 0.4) + uvd_y * 0.4;
    uvx_pos_x = uvx_x + pos_x;
    uvx_pos_y = uvx_y + pos_y;

    temp = uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y
    const f5 = Math.max(0.01 - temp * .04, .0) * 2.0;
    const f52 = Math.max(0.01 - temp * .16, .0) * 2.0;
    const f53 = Math.max(0.01 - temp * .36, .0) * 2.0;

    uvx_x = u * (1 + 0.5) + uvd_x * 0.5;
    uvx_y = v * (1 + 0.5) + uvd_y * 0.5;
    uvx_pos_x = uvx_x - pos_x;
    uvx_pos_y = uvx_y - pos_y;

    temp = uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y
    const f6 = Math.max(0.01 - temp * .9, .0) * 6.0;
    const f62 = Math.max(0.01 - temp * .1, .0) * 3.0;
    const f63 = Math.max(0.01 - temp * .12, .0) * 5.0;

    imgdata.data[4 * i + 0] += 1.2 * ((f2 + f4 + f5 + f6) * 1.3 - uvd_len * .05) * intensity;
    imgdata.data[4 * i + 1] += 1.5 * ((f22 + f42 + f52 + f62) * 1.3 - uvd_len * .05) * intensity;
    imgdata.data[4 * i + 2] += 1.3 * ((f23 + f43 + f53 + f63) * 1.3 - uvd_len * .05) * intensity;
    imgdata.data[4 * i + 3] = 255;
  }
  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)})`)
    .join(" ")

  // set the resolution to the original and then scale down to the viewport to
  // only calculate the filter on pixels the user can see. 
  canvas.height = img.naturalHeight;
  canvas.width = img.naturalWidth;
  if (viewport_scale) {
    canvas.height = canvas.clientHeight;
    canvas.width = canvas.clientWidth;
  }
  ctx.filter = filter
  console.log(filter);
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  ctx.filter = '';

  if (lensflare_active) {
    lensflare(cursor.x, cursor.y);
  }
}