Image with src from URL appearing upside-down or sideways sometimes

Question

I am using jQuery to append an image to a div, while setting the image's source to a local image the user selects. Everything works great, except that the image appears upside-down or sideways sometimes, depending on the image (as far as I know, randomly). The jQuery looks like this:

$('<div class="image_preview">\
<img src="' + URL.createObjectURL(file) + '" />\
</div> ').hide().prependTo($preview_div).fadeIn("fast");

The file object is simply a file taken from a file input element.

The image preview div has some css that looks like:

.image_preview img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 95%;
    max-height: 95%;
}

After searching countless threads I can't find anything on this topic other than people suggesting "maybe the image is supposed to be that way". I verified these images are actually being flipped when rendered. If anyone has heard of such a thing and can even point me in the right direction I would greatly appreciate it. Thanks.

Are you able to get the orientation information from the EXIF data of the selected photo? — jeffjenx, Oct 01 '14 at 03:57
@Quantastical Ok, that actually explained a lot. The orientation is 6 (Rotated 90 degrees CCW). This explains why it's displayed properly elsewhere. Is there a way to detect this that would be simple? Or is this worth another thread? Thanks! — Sloth Armstrong, Oct 01 '14 at 04:03
Never done it before, but the following answer has some insight into retrieving EXIF orientation via JavaScript that you could potentially use: http://stackoverflow.com/questions/14270574/extract-exif-orientation-data-from-image — jeffjenx, Oct 01 '14 at 04:06
@Quantastical - This was the solution. After some trial and error I got it working. If you want please post your response as an answer and I will mark it correct. — Sloth Armstrong, Oct 01 '14 at 14:37

score 3 · Accepted Answer · edited May 23 '17 at 11:57

The photos are likely being presenting in their natural orientation. When taking a photograph, a bunch of meta data about the camera is stored in something called EXIF data, things such as time, location, shutter, and orientation.

Most photo viewing software, including the ones on the device itself, take the orientation into account and display it accordingly. As a result, your logic will need to do the same.

The following StackOverflow post describes in further detail how to accomplish this in JavaScript: extract exif orientation data from image

var b64 = "data:image/jpeg;base64,/9j/4AAQSkZJRgABA......";
var bin = atob( b64.split( ',' )[1] ); // convert base64 encoding to binary
var exif = EXIF.readFromBinaryFile( new BinaryFile( bin ) );

console.log( exif.orientation );

For more information on the FileReader API and the readFromBinaryFile method, here is a link to the MDN: https://developer.mozilla.org/en-US/docs/Web/API/FileReader.readAsBinaryString

Quantastical brings up a good point. Most likely the images appear to be the correct orientation on your machine, but they might not actually be. Like if you were in your file browser, and you had rotated your images. — tbh__, Oct 01 '14 at 04:08

score 1 · Answer 2 · answered Oct 01 '14 at 04:05

I'm not exactly sure why it would make your Image flip, but you might try cleaning up your code a little bit to be more concise. Less jerry rigging on the Jquery.

var prevDiv = $("<div>", {class: "image_preview"});
var img = $("<img />", {src: URL.createObjectURL(file)})
prevDiv.prepend(img).hide().fadeIn("fast");

Something like that.

Image with src from URL appearing upside-down or sideways sometimes

2 Answers2