Fix blob orintaion image without using Canvas - EXIF ​​rotaion

Question

we have some code to upload and preview images using jquery. Please see this script and code.

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> 

here for some images the image is viewed correctly,

but for some images it rotates 90 degrees. Please check it.

Please see this image https://drive.google.com/file/d/1UVW6dXMESAkeRFVxwBfsWWa4e9xD-DIL/view

How can we solve this?

UPDATE

From @qvotaxon's answer, I can understand that https://github.com/blueimp/JavaScript-Load-Image this will help solve the problem. But when I look at it, I struggle with integration. If someone can help integrate with my current code, this will be very helpful.

thanks

Answer 1

The orientation of the image is probably stored in EXIF ​​data. Take a look at this post Exif Client Side Orientation JS: Rotate and Mirror JPEG Images for Solution.