JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.3.0/exif.min.js"></script>
<input id="file-input" type="file"/>
	<h1 id="makeAndModel"></h1>
  <div>
    <h5>
    Canvas
    </h5>
	  <canvas id="myCanvas"></canvas>
  </div>
  <div>
    <h5>
    Img
    </h5>
    <img id="tempImg"/>
  </div>
  <button onclick="executeIt();">
  Get Exif
  </button>

JavaScript

function getInput() {
		return document.getElementById('file-input')
	}
	function fileUploaded(files) {

	  var file = files[0];
	  var reader = new FileReader();

	  reader.onload = function (e) {
	  	console.log(EXIF)

	    var img = document.getElementById("tempImg");
	    img.src = e.target.result;

	    img.onload = function () {

	      var canvas = document.getElementById("myCanvas");

	      var ctx = canvas.getContext("2d");
	      ctx.drawImage(img, 0, 0);
	      canvas.width = 200;
	      canvas.height = 200;
	      var xStart = 0;
	      var yStart = 0;
	      var newHeight = 0;
	      var newWidth = 0;
	      var aspectRatio = img.height / img.width;

	      if (img.height < img.width) {
	        //horizontal
	        aspectRatio = img.width / img.height;
	        newHeight = 200;
	        newWidth = aspectRatio * 200;
	        xStart = -(newWidth - 200) / 2;
	      } else {
	        //vertical
	        newWidth = 200;
	        newHeight = aspectRatio * 200;
	        yStart = -(newHeight - 200) / 2;
	      }


	      var ctx = canvas.getContext("2d");
	      ctx.drawImage(img, xStart, yStart, newWidth, newHeight);


	    }

	  }
	  reader.readAsDataURL(file);

	}
	function getExif () {
		EXIF.getData(document.getElementById('tempImg'), function() {
        var orientation = EXIF.getTag(this, "Orientation");
        var allMetaDataSpan = document.getElementById("makeAndModel");
        allMetaDataSpan.innerHTML = "Orientation: " + orientation;
    });
	}
  function executeIt () {
  	var i = getInput();
    fileUploaded(i.files);
    setTimeout(getExif, 1000);
  }