get ImageData(pixel information) directly from HTML Input Element

getImageDataFromInput.js

/* use on <input> like this, multiple is optional.
 * <input
 *    type="file"
 *    multiple
 *    accept="image/*"
 *    onchange={handleFile}
 * />
 */
function handleFile() {
    function extractDataAndDoSomething(f) {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      const img = new Image();
      const fr = new FileReader();
      img.onload = () => {
        let _imageData;
        ctx.drawImage(img, 0, 0);
        _imageData = ctx.getImageData(0, 0, img.width, img.height);
        
        // do anyting you want here with parsed data
        doSometingWith(_imageData);
      };
      fr.onload = () => { img.src = fr.result; };
      fr.readAsDataURL(f);
    }
    for (const eachFile of new Array(...this.refs.fileInput.files)) {
      extractDataAndDoSomething(eachFile);
    }
  }