<!DOCTYPE html>
<html>
<head>
  <title>In-Browser Greyscale converter</title>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    canvas {
      border: 1px dashed black;
      width: 400px;
      height: 400px;
    }
    #original {
      display:none;
    }
  </style>

<body>
   <input type=file name=file id=file @change=${ele._onFileChange}/>
   <canvas id=original></canvas>

   <canvas id=grey></canvas>

  <script type="text/javascript" charset="utf-8">
    function drawImageAndGreyscaleImg(img) {
      const oCanvas = document.querySelector('#original');
      oCanvas.width = img.width;
      oCanvas.height = img.height;
      const oCtx = oCanvas.getContext('2d');

      oCtx.drawImage(img, 0, 0);

      const pixels = oCtx.getImageData(0, 0, img.width, img.height).data;

      const gCanvas = document.querySelector('#grey');
      gCanvas.width = img.width;
      gCanvas.height = img.height;
      const gCtx = gCanvas.getContext('2d');

      for (let y = 0; y < img.height; y++) {
        for (let x = 0; x < img.width; x++) {
          const offset = 4*(x + img.width*y)
          const r = pixels[offset], g = pixels[offset + 1],
                b = pixels[offset + 2], a = pixels[offset + 3];
          const grey = a*(r + g + b)/3;
          pixels[offset    ] = grey;
          pixels[offset + 1] = grey;
          pixels[offset + 2] = grey;
        }
      }

      const greyData = new ImageData(pixels, img.width, img.height);

      gCtx.putImageData(greyData, 0, 0);
    }
    document.querySelector('#file').addEventListener('change', (e) => {
      const toLoad = e.target.files[0];
      const reader = new FileReader();
      reader.addEventListener('load', () => {
        const b64dataURL = reader.result;

        const img = new Image();
        img.src = b64dataURL;
        requestAnimationFrame( () => {
          drawImageAndGreyscaleImg(img);
        });

      });
      reader.addEventListener('error', () => {
        console.error('Failed to load '+ toLoad.name);
      });
      reader.readAsDataURL(toLoad);
    });
  </script>
<body>
</html>