4

I am creating a photo site - I uploaded a photo of myself which is actually incorrectly oriented (the image is rotated 90 degrees counter clockwise). I have uploaded this image from my iPhone, which apparently has the image stored this way on purpose.

On my site, the HTML page has rendered a JSON object that contains the URL to the photo as well as the image dimensions. I am using jQuery mobile - and onload of the page I put a link on the page, and when you click the photo it displays the photo as a popup. The popup renders an <img> tag with dimensions that are small enough to fit the image within the current viewport width/height. It calculates the dimensions using the JSON I previously mentioned, and the results from $(window).width() and $(window).height().

On desktop - the photo correctly displays in the wrong orientation (because that is how the photo is actually stored).

On iPad & iPhone - the photo is auto-rotated so the photo is correctly oriented, but the dimensions are all wrong so the photo is all stretched out and distorted.

I would like to know the following:

  1. Is this a commonly known feature of browsers on iOS or other devices?
  2. Is there a way to disable this functionality using CSS or Javascript?
  3. Is there a way to detect that it happened and correct the dimensions of the <img> tag? I don't mind that the photo's orientation was corrected by the browser, I just want the dimensions to be proper.

EDITS

Making the Title more in the form of a question - Also reformulating the question to be more direct

MORE EDITS

Here is a JS Fiddle with an example: http://jsfiddle.net/5JKgn/

If you click the link on a desktop computer, the popup shows the image improperly oriented. If you click the link on an iPhone or iPad, the popup shows the image properly oriented, but the dimensions are wrong so the photo is stretched.

In the real scenario, the JSON is rendered by PHP code which can read the image and outputs the width height from what it gets using getimagesize()

codefactor
  • 1,616
  • 2
  • 18
  • 41
  • Have you tried just setting the images height/width to auto along with max-height/width? – monners Jan 24 '14 at 10:11
  • @monners That might be acceptable - but please take a look at the fiddle - I want the popup to show the image centered in the viewport, and the photo to be resized so that it will be visible no matter how big your screen is (i.e. really small on an iphone) – codefactor Jan 25 '14 at 07:05
  • Check out my answer below, is that what you're after or have I missed something? I'm happy to update if necessary. – monners Jan 25 '14 at 07:14
  • On the photo storage code I've done before, we've used the EXIF data to correct the photo orientation, either before storing it or when serving it back. Is there a reason you wouldn't want to do this? – brichins Jan 30 '14 at 17:54
  • @brichins I talked to the client (photographer) - and they are weary of using EXIF data to correct the photo - she said that she takes photos sometimes at weird angles on purpose (artistic) and wouldn't want the file to be changed without her explicit photoshop editions. – codefactor Jan 30 '14 at 18:28
  • 1
    @brichins Perhaps I can explicitly remove the EXIF data? If client insists that the output always respect the actual storage of the photo, right? At this point I would prefer that rather than have output differ based on which browser you use! – codefactor Jan 30 '14 at 18:32
  • @codefactor That sounds like a simple solution to me that would sidestep the problem. I'm not sure what to say about 'weird angles' other than that cameras only store orientation in 90-degree increments, so potrait vs landscape is likely the only issue you'll ever see. Also, getting that additional info on client needs also helps us get to the bottom of the [xy problem](http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) here. – brichins Jan 30 '14 at 18:51

4 Answers4

4

OK I'll try to answer this one:

  1. Yes that's on purpose iOS stores the display-orientation in the EXIF data (among things like resolution, shutter, GPS etc.) but saves the image data in device-orientation.
    For more info on EXIF see Wikipedia.

  2. Not that I know of.

  3. Yes, you should be able to access the EXIF data and determine orientation and dimensions.

Nr. 3 needs a little more explanation:

You could use a library like this one to access the EXIF data from javascript (includes jQuery plugin). The Orientation Tag is defined as: 0x0112 : "Orientation" and stored as a number.

Using that information you can determine the orientation:

Value | Orientation
------|----------------------
1     | horizontal (normal)
2     | flip horizontal
3     | rotate 180°*
4     | flip vertical
5     | transpose
6     | rotate 90°*
7     | transverse
8     | rotate 270°*
* rotation is counter clockwise

That should enable you to at least swap width / height for your <img> if need. Please not that the EXIF data also includes the width and height so if they differ from what you think they should be that could also help to identify rotation issues.

Shirkrin
  • 3,993
  • 1
  • 29
  • 35
  • Is there a way to do it on the PHP server which is writing the JSON object containing URL+dimensions? Note that the images are stored in a folder, and can be read by the PHP server - ideally the server could somehow correct the photo? – codefactor Jan 25 '14 at 06:36
  • Here is a JS fiddle if you want to try to fix this using Javascript: http://jsfiddle.net/5JKgn/ – codefactor Jan 25 '14 at 07:01
  • This is useful - I think I can look up the information using `exif_read_data` in php and correct the photo. – codefactor Jan 25 '14 at 08:15
3

To formalize my comments - perhaps you can just sidestep the issue:

  1. If you don't need to store exact originals, you could rotate the data when storing/retrieving the image.

  2. Or, as the OP noted in response, just remove the EXIF tag, and browsers will no longer be able to use it for 'fixing' the orientation.

(p.s. Always remember to ask 'why' enough times to figure out what problem you're actually trying to solve :D)

Community
  • 1
  • 1
brichins
  • 3,825
  • 2
  • 39
  • 60
  • Any PHP code you know of that can remove the EXIF tag when the image is stored? I store the photos in the file system - and retrieve the photos using the $_FILES variable to fetch uploaded files. – codefactor Jan 30 '14 at 22:15
  • @codefactor I'm not a PHP guy myself, but [this question](http://stackoverflow.com/questions/5384962/writing-exif-data-in-php) and [this question](http://stackoverflow.com/questions/229446/how-do-i-add-exif-data-to-an-image) looked promising. If you're working on existing files and don't want to modify them for each request, you would need to resave each file after tweaking the EXIF. However, if you allow users to download their originals (as opposed to just showing a gallery), you may need to clip the tag on each request (or make an archive copy of each file for serving up originals). – brichins Jan 31 '14 at 17:34
  • The client wants to be able to upload images via FTP or through the web interface - so the files will be stored as originals. But perhaps the request to fetch the image should strip them off. – codefactor Feb 01 '14 at 23:33
2

You don't need to us Javascript to explicitly set the height/width of the image on load. Remove the part of your script that's inserting those inline height/width styles and just add the following to your stylesheet:

.ui-popup-container {
    width: calc(100% - 40px); /* simulates a 20px margin */
}

.ui-popup-container img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

Here's an updated Fiddle

monners
  • 5,174
  • 2
  • 28
  • 47
  • This is close, but the popup is too big. The X button is too far up and to the right - the X button should be on the top right of the image, and the entire popup should have a 20px margin around it. – codefactor Jan 25 '14 at 07:25
  • Also - I would ideally like the photo to have the correct orientation on desktop. – codefactor Jan 25 '14 at 07:26
  • It looks like the X button problem and the popup height problem only happens on desktop when the screen is wider than it is tall. – codefactor Jan 25 '14 at 07:28
  • because the image takes a second to load, the dimensions aren't known when the popup is displayed, so the popup is not opened centered on the viewport. (to experience this be sure to clear your cache and try again) – codefactor Jan 25 '14 at 07:30
  • Correcting the orientation on desktop I can't help ya with. Do you know what you want the maximum width to be on desktop? – monners Jan 25 '14 at 07:33
  • I want the popup image to be no bigger than the original dimensions of the photo (i.e. not pixelated because of a large screen) - and no bigger than 40px less than the width or height of the current viewport and always exactly centered in the viewport (doesn't need to reposition/resize if the viewport changes after opening). But within these conditions, the popup should be as big as it can be. – codefactor Jan 25 '14 at 07:37
0

Use media queries for desktop browsers and set the css for the images to 100% height and auto width.

@media (min-width: 900px)
{
 img {width:auto; height:100%;}
}

You may even consider using these variables instead of calculating them for the mobile site

rootsup
  • 315
  • 2
  • 17