title: Fix blob image orintaion without using Canvas - EXif rotaion
body: <p>we have some code for image upload and preview using jquery .Please see this fiddle and code .</p>
  
  <p><a href="https://jsfiddle.net/28v6vd23/1/" rel="nofollow noreferrer">https://jsfiddle.net/28v6vd23/1/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> function readURL() { 
       var fileList = this.files;
       var anyWindow = window.URL || window.webkitURL;
       var ValidImageTypes = ["image/gif", "image/jpeg", "image/png"];
          
          
      for(var i = 0; i &lt; fileList.length; i++){
     var file_allow = fileList[i];
        var fileType = file_allow["type"];
     if ($.inArray(fileType, ValidImageTypes) &gt; 0) {
          var objectUrl = anyWindow.createObjectURL(fileList[i]);
        var ran_x = Math.floor((Math.random() * 1000000000000) + 1);
       $('.new').append('&lt;div class="my-img-div" style="width:auto; display:inline-block;" &gt;&lt;img  src="' + objectUrl + '" class="my-img" id="" /&gt;&lt;/div&gt;');
      window.URL.revokeObjectURL(fileList[i]);
      }
          }     
          
     }
  
    var inputfile= document.getElementById("inputFile");
    inputfile.addEventListener("change",readURL,false);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;form id="form1" runat="server"&gt;
      &lt;input type='file' id="inputFile" /&gt;
     
  &lt;/form&gt;
  
  &lt;div class="new"&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>here for some images  the image is previewing correctly ,</p>
  
  <p>but for some images it is rotating 90 degree. Please check this .</p>
  
  <p>Please check with this image <a href="https://drive.google.com/file/d/1UVW6dXMESAkeRFVxwBfsWWa4e9xD-DIL/view" rel="nofollow noreferrer">https://drive.google.com/file/d/1UVW6dXMESAkeRFVxwBfsWWa4e9xD-DIL/view</a></p>
  
  <p>How we can solve this ?</p>
  
  <blockquote>
    <p>UPDATE</p>
  </blockquote>
  
  <p>From <a href="https://stackoverflow.com/users/3604086/qvotaxon">@qvotaxon</a> answer i can understand that <a href="https://github.com/blueimp/JavaScript-Load-Image" rel="nofollow noreferrer">https://github.com/blueimp/JavaScript-Load-Image</a> this will help to solve the problem . But when i look into this i am struggling with the integration . If anyone can help the integration with my current code it will be really helpful . </p>
  
  <p>Thank you </p>