Sqor Sports lead Front-End developer Jason Bautista explains how to take advantage of iFrames to properly orient images.
Sqor Sports (www.sqor.com) is a free social and editorial platform that revolves exclusively around sports, athletes, and fans. A feature of the Sqor Sports platform is to accept user submitted content. One of the challenges faced when accepting user content is honoring EXIF orientation data.
Disclaimer: This was a temporary bandaid feature, so there probably are better ways of doing this. A feature like this should be done on the server, though it is a neat trick. It does not work on Internet Explorer. If anyone has any feedback, please email email@example.com.
When dealing with user submitted content, the Sqor Sports Front-End team was surprised at how bad the state of detecting EXIF data was across almost all web browsers. Even Gmail chose to ignore the problem for some time.
Some research was done by reading through pull requests in the Chromium project for hints. There were bug reports but no apparent fixes.
Many articles stated that only a few sites do a near perfect job, Facebook being one of them. Finding a front end solution to this problem was not looking so easy.
There may be better libraries that exist, but the few libraries that were tried were a mess.
Firefox Does it Right:
Firefox is the only web browser to support EXIF orientation in a sensible manner. It is done with a simple css style rule:
The Solution for Chrome & Safari (Desktop):
The trick is rather simple. If an image is opened directly from the desktop with Chrome (Open With), it is read in properly and is displayed correctly with the expected orientation:
The next step was to see if somehow putting the image in an iFrame inside another page would do the trick.
Magically it worked! Success! Well... not exactly.
Setbacks and the Final Solution:
Testing became a big problem. Since the images did not have file extensions, sometimes the browser would prompt the user to try to download the image as a file. This was unfortunate, but there had to be a way to make it work.
Luckily, another trick worked to fix the missing image extension issue.
The solution was to:
1) First, point the iFrame to an image that would work, i.e. pixel.jpg
Success at last!!
Gnarly Version - Double iFrame:
The truth is, this was actually implemented with two iFrames and it was painful. They were used to get around cross site scripting, to quarantine the nasty code which resized the image to fit the desired display area, load the fake image, and change its "src" attribute.
It was decided to use a container iFrame. An example of this file would be:
This iFrame creates and handles an inner iFrame. The inner iFrame points to an image and takes care of rotation and setting the desired dimensions for the image.
Eventually, everything was switched and implemented on the server but it was fun while it lasted.
We are always hiring: firstname.lastname@example.org