How to draw photo with correct orientation in canvas after capture photo by using input[type='file'] in mobile web browser?

Question

I am making a simple web app in mobile which allow visitor to capture photo by using html5 input[type=file] element. Then I will display it on the web for preview, and then visitor can choose to upload the photo to my server for other purpose(ie: upload to FB)

I find a problem on the orientation of photo when I take photo using my iPhone and hold vertically.The photo is in a correct orientation in tag. However, when I try to draw it into canvas by using drawImage() method, it is drawn 90 degree rotated.

I have tried to take photo in 4 orientations, only one of them can draw a correct image in canvas, others are rotated or even flipped upside down.

Well, I am confused to get the correct orientation to fix this problem... Thanks for helping...

here is my code, mostly copy from MDN

<div class="container">             <h1>Camera API</h1>              <section class="main-content">                 <p>A demo of the Camera API, currently implemented in Firefox and Google Chrome on Android. Choose to take a picture with your device's camera and a preview will be shown through createObjectURL or a FileReader object (choosing local files supported too).</p>                  <p>                     <form method="post" enctype="multipart/form-data" action="index.php">                         <input type="file" id="take-picture" name="image" accept="image/*">                         <input type="hidden" name="action" value="submit">                         <input type="submit" >                     </form>                 </p>                  <h2>Preview:</h2>                 <div style="width:100%;max-width:320px;">                     <img src="about:blank" alt="" id="show-picture" width="100%">                 </div>                  <p id="error"></p>                 <canvas id="c" width="640" height="480"></canvas>             </section>          </div>           <script>             (function () {                 var takePicture = document.querySelector("#take-picture"),                     showPicture = document.querySelector("#show-picture");                  if (takePicture && showPicture) {                     // Set events                     takePicture.onchange = function (event) {                         showPicture.onload = function(){                             var canvas = document.querySelector("#c");                             var ctx = canvas.getContext("2d");                             ctx.drawImage(showPicture,0,0,showPicture.width,showPicture.height);                         }                         // Get a reference to the taken picture or chosen file                         var files = event.target.files,                             file;                         if (files && files.length > 0) {                             file = files[0];                             try {                                 // Get window.URL object                                 var URL = window.URL || window.webkitURL;                                  // Create ObjectURL                                 var imgURL = URL.createObjectURL(file);                                  // Set img src to ObjectURL                                 showPicture.src = imgURL;                                  // Revoke ObjectURL                                 URL.revokeObjectURL(imgURL);                             }                             catch (e) {                                 try {                                     // Fallback if createObjectURL is not supported                                     var fileReader = new FileReader();                                     fileReader.onload = function (event) {                                         showPicture.src = event.target.result;                                      };                                     fileReader.readAsDataURL(file);                                 }                                 catch (e) {                                     // Display error message                                     var error = document.querySelector("#error");                                     if (error) {                                         error.innerHTML = "Neither createObjectURL or FileReader are supported";                                     }                                 }                             }                         }                     };                 }             })();         </script> 

Answer 1

You'll need to read the exif data and check if exif.Orientation is one of the following:

fileReader.onloadend = function() {      var exif = EXIF.readFromBinaryFile(new BinaryFile(this.result));      switch(exif.Orientation){         case 8:            ctx.rotate(90*Math.PI/180);            break;        case 3:            ctx.rotate(180*Math.PI/180);            break;        case 6:            ctx.rotate(-90*Math.PI/180);            break;       } };