Re-orient image based on exif data

<!DOCTYPE HTML>
<!--
/*
 * JavaScript Load Image Demo
 * https://github.com/blueimp/JavaScript-Load-Image
 *
 * Copyright 2011, Sebastian Tschan
 * https://blueimp.net
 *
 * Licensed under the MIT license:
 * https://opensource.org/licenses/MIT
 */
-->
<html lang="en">
<head>
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<meta charset="utf-8">
<title>JavaScript Load Image</title>
<meta name="description" content="JavaScript Load Image is a library to load images provided as File or Blob objects or via URL. It returns an optionally scaled and/or cropped HTML img or canvas element. It also provides a method to parse image meta data to extract Exif tags and thumbnails and to restore the complete image header after resizing.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Jcrop is not required by JavaScript Load Image, but included for the demo -->

</head>
<body>

<h2>Select an image file</h2>
<p><input type="file" id="file-input" onchange="readFile(this.value)"></p>
<br>
<h2>Result</h2>
<p id="actions" style="display:none;">
	<button type="button" id="edit">Edit</button>
	<button type="button" id="crop">Crop</button>
</p>
<img id="result" class="result" />
<br>
<div id="exif" class="exif" style="display:none;">
    <h2>Exif meta data</h2>
    <p id="thumbnail" class="thumbnail" style="display:none;"></p>
    <table></table>
</div>
<br>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-load-image/2.18.0/load-image.all.min.js"></script>
<script src="script.js"></script>    

</body>
</html>


function readFile() {
  
  var preview = document.querySelector('#result');
  var file = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.addEventListener("load", function () {
    
    loadImage(
        reader.result,
        function (img) {
          preview.src = img.toDataURL("image/jpeg");
        },
        {
            orientation: true,
            maxHeight: 300,
            canvas: true
        }
    );
    
    //preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
  
}

/* Styles go here */