We'll I am sure many of you have experienced this issue before, especially since we can now easily upload images from our iOS devices to a website using the old reliable file input field.
You see the image on your phone, it looks great, you upload it, you get excited and then ... disappointment. Your image is either sideways or upside down and you have no idea why! I am sure it even gets better for some of you.
You are having a relaxing day and a client calls you because their site is broken, or they think it is. Well it is not and the issue is simply due to a small change Apple did to make the camera work just a little faster. I can't seem to find when they did this (wanted to post to it) but I believe around the release of the iPhone 4s is when this occurred. What the camera does is take the picture and rather than fixing the orientation before it saves, it adds the orientation rules to the EXIF metadata. It even gets better, by some posts I read, it appears that some Operating Systems ignore this metadata and then the image itself is received by a third party either sideways or upside down. I don't experience this because I am on a Mac so the orientation is shown correctly but not in a browser. First some examples of what I mean.
Below is the test image open in Preview and in Chrome. As you can see the image is upright in preview, the correct orientation but it Chrome it is sideways.
So first lets look at our image and see why we are getting this. Now, there are 2 ways to get EXIF Metadata with ColdFusion. One is
ImageGetEXIFMetadata() and the second is
ImageGetEXIFTag(). The first returns a full struct of all the metadata and the latter lets you look for a specific key. For my example I will use
ImageGetEXIFMetadata(), so we can see what that looks like.
As you can see, there is a key named orientation with a value of "Left side, bottom (Rotate 270 CW)". These are the instructions of how to rotate the image for the correct view, or how it was taken, how ever you interpret. I have seen 4 possible outputs in my tests which are as follows:
- Top, left side (Horizontal / normal)
- Left side, bottom (Rotate 270 CW)
- Bottom, right side (Rotate 180)
- Right side, top (Rotate 90 CW)
With those instructions available I started with the following solution.
Now an interesting thing happens, look at the image below:
The image in Chrome is fixed but now my Mac shows it sideways, why? Well simple, when we rotated the image and saved it again, the EXIF data stayed intact, so my Mac still will follow the instructions and rotate the image. This might not be of big concern but lets say your user downloaded the image file and then it did this, it would appear .. well broken.
There are a couple of ways to fix this, some more involved than others, like getting a Java Library to be able to either remove the orientation key from the metadata or rewrite all the metadata. With ColdFusion there is a simple way to just clear the metadata and that is using
ImageCopy() or
ImagePaste(). I will use
ImageCopy() as it required less code.
By adding one line to our example above, our new image would have all the metadata stripped and the file would now render properly on the OS and the Browser. If the metadata is important for you to keep, I suggest looking at other options but this is for a quick easy web only view, so it really doesn't matter much to me. If it did, I would most likely save the metadata somewhere I can retrieve later for analytics in relation to the image or like I recommended, use a library to overwrite the 1 key. The final code example is as follows:
And the final output:
Thank you for reading and hope this helps someone having this particular issue.
