在不使用 Canvas - EXif 旋转的情况下修复 blob 图像方向

Question

我们有一些使用 jquery 上传和预览图片的代码。请看这个小提琴和代码。

https://jsfiddle.net/28v6vd23/1/

 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 < fileList.length; i++){
			var file_allow = fileList[i];
      var fileType = file_allow["type"];
			if ($.inArray(fileType, ValidImageTypes) > 0) {
        var objectUrl = anyWindow.createObjectURL(fileList[i]);
		    var ran_x = Math.floor((Math.random() * 1000000000000) + 1);
		   $('.new').append('<div class="my-img-div" style="width:auto; display:inline-block;" ><img  src="' + objectUrl + '" class="my-img" id="" /></div>');
		  window.URL.revokeObjectURL(fileList[i]);
		  }
        }     
        
   }

  var inputfile= document.getElementById("inputFile");
  inputfile.addEventListener("change",readURL,false);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
    <input type='file' id="inputFile" />
   
</form>

<div class="new">

</div>

这里有些图片预览正确，

但对于某些图像，它会旋转 90 度。请检查这个。

请查看此图片https://drive.google.com/file/d/1UVW6dXMESAkeRFVxwBfsWWa4e9xD-DIL/view

我们如何解决这个问题？

更新

来自@qvotaxon 的回答我可以理解https://github.com/blueimp/JavaScript-Load-Image 这将有助于解决问题。但是当我研究这个时，我正在努力整合。如果有人可以帮助与我当前的代码集成，那将非常有帮助。

谢谢

Answer 1

图像的方向可能存储在 EXIF 数据中。看看这个帖子JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images 以获得解决方案。