JSFiddle - React, Tailwind, and code Playground

by Bhavik Bamania

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.3.0/exif.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
			<header class="text-center">
				<h1>Upload a local file to read Exif data and check rotation.</h1>
			</header>
			
			<section class="row">
				<div id="content" class="col-xs-12">
					<input id="inputimage" type="file"/>
					<img id="myImg" class="img-responsive" crossorigin="anonymous" src=""/>
					<canvas id="myCanvas"></canvas>
				</div>
			</section>
		
			<footer class="text-center">
				<p>Copyright Wassa 2017</p>
			</footer>
		</div>

JavaScript

function readURL(input) {
			// If file is loaded, create new FileReader
			  if (input.files && input.files[0]) {
				  console.log(input.files[0])
				// Create a FileReader
			    var reader = new FileReader();
			    // Set onloadend function on reader
			    reader.onloadend = function (e) {
				    
				  // Update an image tag with loaded image source
			      $('#myImg').attr('src', e.target.result);
			      // Use EXIF library to handle the loaded image exif orientation
			      EXIF.getData(input.files[0], function() {
				      
				    // Fetch image tag
	                var img = $("#myImg").get(0);
	                // Fetch canvas
				    var canvas = $("#myCanvas").get(0);
					// run orientation on img in canvas
	                orientation(img, canvas);
			    });
		    };
		    
		    // Trigger reader to read the file input
		    reader.readAsDataURL(input.files[0]);
		  }
		}
    
    function orientation(img, canvas) {
	
	        // Set variables
	        var ctx = canvas.getContext("2d");
	        var exifOrientation = '';
	        var width = img.width,
	            height = img.height;
	            
	            console.log(width);
	            console.log(height);
	
	        // Check orientation in EXIF metadatas
	        EXIF.getData(img, function() {
	            var allMetaData = EXIF.getAllTags(this);
	            exifOrientation = allMetaData.Orientation;
	            console.log('Exif orientation: ' + exifOrientation);
	        });
	
	        // set proper canvas dimensions before transform & export
	        if (jQuery.inArray(exifOrientation, [5, 6, 7, 8]) > -1) {
	            canvas.width = height;
	            canvas.height = width;
	        } else {
	            canvas.width = width;
	            canvas.height = height;
	        }
	
	        // transform context before drawing image
	        switch (exifOrientation) {
	            case 2:
	                ctx.transform(-1, 0, 0, 1, width, 0);
	                break;
	          ...