3

I'm trying to dinamically preview an image in javascript before uploading it, so I got this code from here: Preview an image before it is uploaded

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
  var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
  };
</script>

It works fine, but when I load a picture that's in portrait format, it rotates it automatically and sets it to landscape. How can I prevent that from happening?

Community
  • 1
  • 1
sigmaxf
  • 7,998
  • 15
  • 65
  • 125

2 Answers2

0

It's not rotating the picture automatically. When I tested it, it's showing me the correct image and orientation.

You probably are experiencing a problem with the EXIF orientation of your image which is not being honored by the browser.

I suggest you open the image in an image editing software, like Photoshop, make sure it's in portrait, and save it under a new name.

Try your script again and it should work.

If not, try with another image (a portrait image found on the Web).

VVV
  • 7,563
  • 3
  • 34
  • 55
  • any ideas on how to make the image orientation be honored by the browser? – sigmaxf Aug 25 '15 at 04:54
  • I don't think you can force it. It's up to the user to submit a file correctly. Sometimes, when I upload images taken from my iPad on kijiji, my images are not in the right format. Same problem as you. I need to resave them and upload them again. – VVV Aug 25 '15 at 05:00
  • Someone asked a similar question but without an answer: http://stackoverflow.com/questions/12026441/is-there-a-way-to-tell-browsers-to-honor-the-jpeg-exif-orientation – VVV Aug 25 '15 at 05:01
0

for firefox, you can use image-orientation

img {
    image-orientation: from-image;
}

you could also use this library:

JavaScript Load Image is a library to load images provided as File or Blob objects or via URL. It returns an optionally scaled and/or cropped HTML img or canvas element.

Félix Adriyel Gagnon-Grenier
  • 8,422
  • 10
  • 52
  • 65
trquoccuong
  • 2,857
  • 2
  • 20
  • 26
  • any cross browser solutions? image-orientation seems to only work in FF http://caniuse.com/#search=image-orientation – sigmaxf Aug 25 '15 at 04:55
  • From w3: (This property is likely going to be deprecated and its functionality moved to HTML) – sigmaxf Aug 25 '15 at 04:58