Image orientation when retrieving original image with readAsDataURL

I can’t find any example for using FileReader.readAsDataURL and show the result image in a container with the right image orientation.

All the portrait images coming from my camera and iPhone devices have this issue. Only the portrait photos saved with adobe photoshop seem to not have this issue.

  • Download Excel file from server and save on client
  • Using FileReader.readAsArrayBuffer() on changed files in Firefox
  • how to make next and previous button in monocle ebook reader using this codes?
  • How to parse Excel file in Javascript/HTML5
  • Opening zip files in browser with FileReader and JSZip.js
  • fileReader.readAsBinaryString to upload files
  • Here is one of the example system that I’ve found in the internet. My code is very similar:

    Notice when uploading this photo that it’s loaded in landscape mode:

    Notice that the image actually displays in landscape when using the browser to download it. When you save it to the disk and open with the finder it is previewed in portrait. (Probably the finder is clever to use the exif info)

    Using exif.js I have discovered that the example image has an Orientation=8. The photos that are saved using photoshop have an Orientation=1.

    Now, how do you guys suggest that I go about this? Should I plot it in a canvas and rotate depending on the exif information? Someone has a good tutorial about this? Have anyone faced this problem before?

  • FileReader memory leak in Chrome
  • How can i move rotated canvas image whitout disorientation?
  • Firefox Mobile SecurityError for FileReader API
  • Retrieve EXIF Image Meta Data from HTML5 FileApi loaded Image?
  • convert svg to png using canvas and filereader
  • Javascript convert blob to string and back