gpix.js

let $photoInput = document.getElementById("input");
let fileReader = new FileReader();
let image = new Image();
let $editor = document.getElementById("editor");
let $editorCtx = $editor.getContext("2d");

//This is a performance test
function opacitor(op) {
  let imgData = $editorCtx.getImageData(0, 0, $editor.width, $editor.height);
  for (let x = 0; x < image.width; x++) {
    for (let y = 0; y < image.height; y++) {
      let index = (x + y * image.width) * 4;
      imgData.data[index + 3] = op;
    }
  }

  $editorCtx.putImageData(imgData, 0, 0);
}

image.addEventListener("load", e => {
  $editorCtx.drawImage(image, 0, 0);
  opacitor(23);
});

fileReader.addEventListener("load", e => {
  let base64 = e.target.result;
  image.src = base64;
});

$photoInput.addEventListener("change", e => {
  let file = e.target.files[0];
  fileReader.readAsDataURL(file);
});