CODEWITHSUNDEEP
javascripthtml
Kintarō
Kintarō

Reputation: 3187

Image wrong orientation in html5 preview

Suppose my image is not upright (I open it in window browser and the image it not upright), but when I upload it to some server (such as gmail, stackoverflow). The image becomes upright.

I asked this question is that I am writing a preview logic with html5 and javascript. The image that I talk about show what exactly I see in window browser. Just wondering if the server did some trick to adjust the orientation?

Image shown in windows:

enter image description here

Image that directly upload to stack overflow:

enter image description here

Upvotes: 3

Views: 2956

Answers (3)

Jasper
Jasper

Reputation: 8705

On Server Side:
You can use a tool like Graphics Magic to auto-orient the image correctly: http://www.graphicsmagick.org/GraphicsMagick.html

gm.exe -convert -auto-orient MyImage.jpg MyImageCorrectOrientation.jpg

Upvotes: 0

Ray Nicholus
Ray Nicholus

Reputation: 19890

I'm guessing you are talking about an image you generate or manipulate client-side using a canvas element that is then rendered back into an img tag. Correct?

Server-side, the orientation can be determined by looking at the image's EXIF orientation flag. It IS possible to examine this flag client-side using a library like jQuery fileExif.

Upvotes: 3

user1467267
user1467267

Reputation:

If you use a script like ImageInfo you can fetch EXIF data (if the image has it). If it hasn't you practically can't know why it happened. Might be some "fake" displaying on the computer you are working on. Some image managers might keep duplicates of an originally rotated image.

The EXIF property Orientation might tell you if the image is changed, based on it's dimensions compared to it's orientation.

Upvotes: 2

Related Questions