Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

<img> unwanted photo rotation

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.

like image 975
captainGeech Avatar asked Feb 07 '15 01:02

captainGeech


People also ask

Why does IMG tag show wrong orientation?

The reason for this can be that they have been rotated before the upload or because they contain EXIF data which cause that the images get rotated.

How do I stop my photos rotating?

1 – Tap the Settings icon (it looks like a “gear” or “cog“). 2 – Tap Display. 3 – Tap Advanced. 4 – Tap Auto-rotate screen to “uncheck” the box beside of it.

Why does my photo Keep rotating?

Photos taken with a smartphone or digital camera contain “Exif data,” all sorts of information about where the photo was taken, when it was taken, and even how the camera was oriented. When uploaded to File Manager, this data is preserved, and that can often cause the orientation of the picture to be rotated.

Why are my images sideways?

The reason your photo would appear this way is because the photo was taken that way (either with the phone sideways or upside down) and the image file itself is in this orientation. For example, if you hold your phone upright and take a photo, the photo is saved in portrait mode or "sideways".


1 Answers

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.)

like image 160
Joseph Myers Avatar answered Oct 20 '22 14:10

Joseph Myers