5

I am having a file input control on the page to select an image. When user selects an image, I am showing image on the page.

But my problem is, when user selects a vertical or portrait image it is displayed in landscape mode.

So, how can I detect image orientation & apply proper css to show in Landscape or Portrait view.

Shankar
  • 256
  • 2
  • 12
  • Can't you calculate if width is larger than height is landscape and the other way around? Based on that you can create two classes with the respective style. – Lucas Lazaro Jun 23 '15 at 10:06
  • 1
    Do you mean, a photo that is displayed in a desktop image viewer one way is being displayed differently in your app? This might be due to EXIF data not being read or being interpreted incorrectly. see here: http://stackoverflow.com/questions/7584794/accessing-jpeg-exif-rotation-data-in-javascript-on-the-client-side – Ben Philipp Jun 23 '15 at 10:17
  • @BenPhilipp I tried the solution you posted but that giving me exception as Uncaught ReferenceError: EXIF is not defined – Shankar Jun 23 '15 at 10:33
  • Mind you, they are using external libraries there. But did I interpret your problem correctly? – Ben Philipp Jun 23 '15 at 10:54
  • @BenPhilipp yes you did. They have mentioned external library for "BinaryFile" but not for EXIF. I got another JS library that gives me EXIF referece – Shankar Jun 23 '15 at 10:57

1 Answers1

1

Step #1:

Check if the image's width is bigger than its heigth. Then you'll figure out that the image is a landscape image. You can check it quickly using javascript.

Step #2:

Create a CSS and apply it using a class (apply the class using javascript) for whatever orientation you need.

Rafael Cavalcante
  • 407
  • 5
  • 13