Img Tag Displays Wrong Orientation

img tag displays wrong orientation

I forgot to add my own answer here. I was using Ruby on Rails so it might not be applicable to your projects in PHP or other frameworks. In my case, I was using Carrierwave gem for uploading the images. My solution was to add the following code to the uploader class to fix the EXIF problem before saving the file.

process :fix_exif_rotation
def fix_exif_rotation
  manipulate! do |img|
    img.auto_orient!
    img = yield(img) if block_given?
    img
  end
end

Incorrect image rotation in img tag

I found the problem. The images that don't show properly are uploaded from mobile devices such as Samsung and iPhone. So the EXIF orientation is that of the mobile.

To see the exact exif of the image, you can test it here http://exif.regex.info/exif.cgi. Even if you open the image directly in browsers such as Chrome or Firefox, you will see the image with the right orientation, but if you load the image using the html img tag, it will show the exif orientation.

So the best solution is to check exif orientation before uploading image, and then convert it to the right orientation by using a php function.

function image_fix_orientation($path)
{
    $image = imagecreatefromjpeg($path);
    $exif = exif_read_data($path);

    if (empty($exif['Orientation']))
    {
        return false;
    }

    switch ($exif['Orientation'])
    {
        case 3:
            $image = imagerotate($image, 180, 0);
            break;
        case 6:
            $image = imagerotate($image, - 90, 0);
            break;
        case 8:
            $image = imagerotate($image, 90, 0);
            break;
    }

    imagejpeg($image, $path);

    return true;
}

// For JPEG image only
image_fix_orientation('/path/to/image.jpg');

Images being displayed in wrong orientation

I'm guessing the OP is having problems due to EXIF data. If the original images contain EXIF data indicating that they should be rotated, special measures must be taken to get that data interpreted by a web browser when displaying a page. It is discussed here:

Is there a way to tell browsers to honor the jpeg exif orientation?

If the the solutions provided for exif orientation are not acceptable, the OP will have to preprocess the images to rotate them to proper orientation and save them that way on the serverside. Then the correctly rotated images can be delivered on web page.

How can I get my image to display vertically oriented?

I'm not familiar with Meteor and this is just a guess. Maybe the JPEG file has its EXIF rotation property set which Windows Explorer is reading and using to "soft-rotate" the image for display and which the browser when referencing the image is simply ignoring (or vice-versa).

The simplest option might be to rotate the image using CSS as described here.

If you open the image in an image editor you can see if the image is rotated or not and if not then rotate it and see if that has any effect on its display on the web page.

Or you could view the EXIF properties of the file with an application such as one mentioned here.

A last resort could be to try to rotate the image according to its EXIF property with JS as described here, though that still assumes it has something to do with EXIF.

Whatever it is I think it has something to do with the file and/or its metadata rather than the HTML used to reference it, but since I don't know what other HTML or CSS may be being applied to the tag I may be wrong about that.

Hope that helps!

Safari display incorrect image orientation but correct on Chrome

Your problem seems pretty similar to this:
EXIF Orientation Issue in Safari Mobile

It's pretty much a browser version problem, the EXIF library was created to handle this kinds of issues.

---

Related Topics