img tag displays wrong orientation

Question

I have an image at this link  http   d38daqc8ucuvuv cloudfront net avatars 216 2014-02-19 2017 13 48 jpg  As you can see  this is a normal image with correct orientation  However  when I set this link to src attribute of my image tag  the image becomes upside down  http   jsfiddle net 7j5xJ    x000D   x000D   lt img src  http   d38daqc8ucuvuv cloudfront net avatars 216 2014-02-19 2017 13 48 jpg  width  200   gt  x000D   x000D   x000D    Do you have any idea what is going on

User · Answer

Your image is actually upside down  But it has a meta attribute  Orientation  which tells the viewer it should be the rotated 180 degrees  Some devices viewers don t obey this rule   Open it in Chrome  right way up Open it in FF  right way up Open it in IE  upside down  Open it in Paint  Upside down Open it in Photoshop  Right way up  etc

User · Answer

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

User · Answer

An easy way to the fix the problem  sans coding  is to use Photoshop s Save for Web export function  In the dialog box one can chose to remove all or most of an image s EXIF data  I usually just keep copyright and contact info  Also  since images coming directly from a digital camera are greatly oversized for web display it is a good idea to downsize them via Save for the Web anyway  For those that are not Photoshop savvy  I have no doubt that there are online resources for resizing an image and stripping it of any unnecessary EXIF data

User · Answer

save as png solved the problem for me

User · Answer

You can use Exif-JS   to check the  Orientation  property of the image  Then apply a css transform as needed   EXIF getData imageElement  function                     var orientation   EXIF getTag this   Orientation                     if orientation    6                        imageElement  css  transform    rotate 90deg

User · Answer

Until CSS  image-orientation from-image  is more universally supported we are doing a server side solution with python   Here s the gist of it   You check the exif data for orientation  then rotate the image accordingly and resave   We prefer this solution over client side solutions as it does not require loading extra libraries client side  and this operation only has to happen one time on file upload   if fileType     image       exifToolCommand    exiftool -j   s     filePath     exif   json loads subprocess check output shlex split exifToolCommand   stderr subprocess PIPE       if  Orientation  in exif 0           findDegrees    re compile    0-9      search exif 0   Orientation    groups           if findDegrees              rotateDegrees   int findDegrees              if  CW  in exif 0   Orientation   and  CCW  not in exif 0   Orientation                    rotateDegrees   rotateDegrees   -1               rotate image             img   Image open filePath              img2   img rotate rotateDegrees              img2 save filePath

User · Answer

I found part of the solution  Images now have metadata that specify the orientation of the photo  There is a new CSS spec for image-orientation   Just add this to your CSS   img       image-orientation  from-image      According to the spec as of Jan 25 2016  Firefox and iOS Safari  behind a prefix  are the only browsers that support this  I m seeing issues with Safari and Chrome still  However  mobile Safari seems to natively support orientation without the CSS tag   I suppose we ll have to wait and see if browsers wills start supporting image-orientation

User · Answer

This answer builds on bsap s answer using Exif-JS   but doesn t rely on jQuery and is fairly compatible even with older browsers   The following are example html and js files   rotate html    lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01 Frameset  EN      http   www w3 org TR html4 frameset dtd  gt     lt html gt     lt head gt       lt style gt         rotate90          -webkit-transform  rotate 90deg          -moz-transform  rotate 90deg          -o-transform  rotate 90deg          -ms-transform  rotate 90deg          transform  rotate 90deg                  rotate180          -webkit-transform  rotate 180deg          -moz-transform  rotate 180deg          -o-transform  rotate 180deg          -ms-transform  rotate 180deg          transform  rotate 180deg                  rotate270          -webkit-transform  rotate 270deg          -moz-transform  rotate 270deg          -o-transform  rotate 270deg          -ms-transform  rotate 270deg          transform  rotate 270deg                lt  style gt     lt  head gt     lt body gt       lt img src  pic pic03 jpg  width  200  alt  Cat 1  id  campic  class  camview  gt       lt script type  text javascript  src  exif js  gt  lt  script gt       lt script type  text javascript  src  rotate js  gt  lt  script gt     lt  body gt     lt  html gt    rotate js   window onload getExif  var newimg   document getElementById  campic    function getExif         EXIF getData newimg  function                 var orientation   EXIF getTag this   Orientation                if orientation    6                    newimg className    camview rotate90                 else if orientation    8                    newimg className    camview rotate270                 else if orientation    3                    newimg className    camview rotate180

User · Answer

It s the EXIF data that your Samsung phone incorporates

User · Answer

It happens since original orientation of image is not as we see in image viewer  In such cases image is displayed vertical to us in image viewer but it is horizontal in actual    To resolve this do following    Open image in image editor like paint   in windows   or ImageMagick   in linux   Rotate image left right  Save the image    This should resolve the issue permanently

User · Answer

This problem was driving me crazy too  I was using PHP on my server side so I was not able to use  The Lazy Log ruby   amp   deweydb python  solutions  However it pointed me to the right direction  I fixed it on the backed using Imagick s getImageOrientation      lt  php     Note   image is an Imagick object  not a filename  See example use below   function autoRotateImage  image          orientation    image- gt getImageOrientation          switch  orientation             case imagick  ORIENTATION BOTTOMRIGHT                image- gt rotateimage   000   180      rotate 180 degrees          break            case imagick  ORIENTATION RIGHTTOP                image- gt rotateimage   000   90      rotate 90 degrees CW          break            case imagick  ORIENTATION LEFTBOTTOM                image- gt rotateimage   000   -90      rotate 90 degrees CCW          break                  Now that it s auto-rotated  make sure the EXIF data is correct in case the EXIF gets saved with the image        image- gt setImageOrientation imagick  ORIENTATION TOPLEFT         gt     Here is the link if you want to read more  http   php net manual en imagick getimageorientation php

User · Answer

I think there are some issues in browser auto fix image orientation  for example  if I visit the picture directly  it shows the right orientation  but show wrong orientation in some exits html page

User · Answer

If you have access to Linux  then open a terminal  cd to the directory containing your images and then run  mogrify -auto-orient     This should permanently fix the orientation issues on all the images

[html] img tag displays wrong orientation

Examples related to html

Examples related to css

Examples related to image