5

I have an image embedded in a table using HTML5. The image is being rotated automatically 90deg counterclockwise, and there is no CSS being applied, nor Javascript (there used to be, hence the class parameters on some of the tags, but I commented out the <style></style> block in the <head>.

The image was created by a PHP script w/ Imagick to scale it down from the original image, but the original image still had the same problem.

Code:

<table>
    <tr>
        <th>$username has sent you a photo!</th>
    </tr>
    <tr>
        <td>
            <img src="IMG_1314_MOD.jpg" width="300" height="225" class="rotate90"/>
        </td>
    </tr>
    <tr>
        <td><div class="caption">$caption</div></td>
    </tr>
</table>

I tried using the CSS code in this answer and applied it to the <img>, but when it rotated, it didn't adjust the table, and covered up the text.

Does anybody know of a solution to this that I could use?

--EDIT--

I used the EXIF extension with PHP to print_r() the EXIF headers on the image, and there didn't seem to be any orientation headers. The headers can be found on Pastebin here if you wouldn't mind double-checking, whoever may read this.

Community
  • 1
  • 1
captainGeech
  • 302
  • 1
  • 5
  • 17
  • 3
    Probably your image contains orientation information in the (EXIF) meta data, so that dedicated image viewer applications rotate it automatically, whereas simple web browsers don’t. In that case, what you are seeing in the browser would be the _non-rotated_ version of the image, and only some other software would _show_ it to you rotated. – CBroe Feb 07 '15 at 01:52
  • @CBroe Is there any way to remove that information from the metadata? – captainGeech Feb 07 '15 at 01:59
  • @CBroe I did a `print_r()` on the EXIF headers from the modified image using PHP and there didn't seem to be any orientation data. I added some info to the question – captainGeech Feb 07 '15 at 02:59
  • 2
    _“and there didn't seem to be any orientation data”_ – so what’s `[Orientation] => 6` then? As you can see [here](http://www.impulseadventure.com/photo/exif-orientation.html), a value of `6` means that the camera was held rotated 90deg clockwise, so that explains why it looks like it was rotated 90deg counter-clockwise when that orientation is _not_ taken into account (see second row there, “Encoded JPEG”.) – CBroe Feb 07 '15 at 03:02
  • @CBroe Thanks for taking a look at it, I figured I missed something – captainGeech Feb 07 '15 at 16:15
  • 4
    Possible duplicate of [How to stop PHP iMagick auto-rotating images based on EXIF 'orientation' data](http://stackoverflow.com/questions/4266656/how-to-stop-php-imagick-auto-rotating-images-based-on-exif-orientation-data) – cimmanon Jan 26 '16 at 20:07
  • Alternate duplicate: http://stackoverflow.com/questions/19456036/detect-exif-orientation-and-rotate-image-using-imagemagick – cimmanon Jan 26 '16 at 20:07

3 Answers3

5

Run jhead -autorot on your JPG image. That's what I do to handle autorotation before putting my images on the web.

This will rotate the image as specified by the camera's orientation sensor, then reset the orientation flag so that it will not be accidentally rotated again.

http://www.sentex.net/~mwandel/jhead/usage.html

(Note, I never autorotate my originals, just the scaled versions as part of my script for sending them to the web.)

Joseph Myers
  • 6,434
  • 27
  • 36
0

[Orientation] => 6 there's the rotation, you could switch it to 1

Dan
  • 10,531
  • 2
  • 36
  • 55
Jorge
  • 1
  • 3
0

exiftran can rotate JPEG images losslessly, keeping EXIF data and thumbnail consistent. It also doesn't edit unnecessarily (which happened when I tried ImageMagick/GraphicsMagick), and produces stable output.

Flags: -a to apply the rotation in the EXIF tag, -i to edit in place, -p to preserve file timestamps.

Usage:

exiftran -aip -- *.jpg
Tobu
  • 24,771
  • 4
  • 91
  • 98