Best IT Recipes

Img has the wrong orientation

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 the correct orientation. However, when I set this link to the src attribute of my image tag, the image becomes upside down. http://jsfiddle.net/7j5xJ/

<img src="http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg" width="200"/>

Do you have any idea what is going on?

+101
html css image
Jul 09 '14 at 15:53
source share
13 answers

I forgot to add my own answer here. I used Ruby on Rails, so it may not be applicable to your projects in PHP or other environments. In my case, I used the Carrierwave gem to upload images. My solution was to add the following code to the bootloader 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
+12
Feb 28 '16 at 1:09
source share

I found part of the solution. Images now have metadata indicating the orientation of the photo. There is a new CSS specification for image-orientation .

Just add this to your CSS:

 img { image-orientation: from-image; }

According to the spec of January 25, 2016, Firefox and iOS Safari (prefixed) are the only browsers that support this. I see problems with Safari and Chrome. However, Mobile Safari seems to support orientation without a CSS tag.

I suppose we have to wait and see if browsers start supporting image-orientation .

+74
Jan 11
source share

Your image is really upside down. But he does have the “Orientation” meta attribute that tells the viewer that he needs to rotate 180 degrees. Some devices / viewers do not obey this rule.

Open it in Chrome: go back up Open it in FF: go back up Open it in IE: upside down.

Open it in Paint: inverted Open it in Photoshop: Go back up. and etc.

+21
Jul 09 '14 at 15:59
source share

This is the EXIF ​​data that your Samsung phone supports.

+6
Jul 09 '14 at 16:02
source share

You can use Exif-JS to check the "Orientation" property of an image. Then apply the CSS transform as needed.

 EXIF.getData(imageElement, function() { var orientation = EXIF.getTag(this, "Orientation"); if(orientation == 6) $(imageElement).css('transform', 'rotate(90deg)') });
+6
Nov 27 '17 at 15:43
source share

This answer is based on the bsap answer using Exif-JS , but is not based on jQuery and is pretty compatible even with older browsers. The following are examples of html and js files:

rotate.html:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <style> .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); } </style> </head> <body> <img src="pic/pic03.jpg" width="200" alt="Cat 1" id="campic" class="camview"> <script type="text/javascript" src="exif.js"></script> <script type="text/javascript" src="rotate.js"></script> </body> </html>

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"; } }); };
+6
May 29 '18 at 19:24
source share

save since png solved the problem for me.

+5
Dec 30 '17 at 22:14
source share

So far CSS: image-orientation:from-image; more universally supported, we make a server-side solution with python. That is the essence of this. You check the exif data for orientation, then rotate the image accordingly and save.

We prefer this solution over client solutions, as it does not require downloading third-party libraries on the client side, and this operation should happen only once when downloading a file.

 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)
+4
Dec 02 '17 at 0:09
source share

This problem drove me crazy too. I used PHP on my server side, so I could not use @The Lazy Log (ruby) and @deweydb (python) solutions. However, this showed me the right direction. I fixed this with Imagick getImageOrientation ().

 <?php // Note: $image is an Imagick object, not a filename! See example use below. function autoRotateImage($image) { $orientation = $image->getImageOrientation(); switch($orientation) { case imagick::ORIENTATION_BOTTOMRIGHT: $image->rotateimage("#000", 180); // rotate 180 degrees break; case imagick::ORIENTATION_RIGHTTOP: $image->rotateimage("#000", 90); // rotate 90 degrees CW break; case imagick::ORIENTATION_LEFTBOTTOM: $image->rotateimage("#000", -90); // rotate 90 degrees CCW break; } // Now that it auto-rotated, make sure the EXIF data is correct in case the EXIF gets saved with the image! $image->setImageOrientation(imagick::ORIENTATION_TOPLEFT); } ?>

Here is the link if you want to know more. http://php.net/manual/en/imagick.getimageorientation.php

+4
Feb 18 '18 at 5:37
source share

An easy way to fix the problem, without coding, is to use the Photoshop Save for Web export function. In the dialog box, you can choose to delete all or most EXIF ​​images. I usually post copyright and contact information. In addition, since the images coming directly from the digital camera are greatly overestimated for the web display, it is a good idea to reduce them with Save for the Web anyway. For those who are not Photoshop savvy, I have no doubt that there are online resources for resizing an image and removing it from unnecessary EXIF ​​data.

+1
Jul 07 '17 at 20:04 on
source share

I think there are some problems in the browser with automatic correction of the image orientation, for example, if I visit the image directly, it shows the correct orientation, but shows the wrong orientation on some outputs of the HTML page.

0
Mar 15 '19 at 7:40
source share

If you have access to Linux, open a terminal, go to the directory with your images and run

 mogrify -auto-orient *

This should permanently solve orientation problems.

0
Jul 12 '19 at 11:40
source share

Use an external style. In the html sheet, enter the class name in the tag. in the stylesheet use the dot operator preceding the class name and then write the following code

 .rotate180 { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }
-eighteen
Jul 09 '14 at 16:12
source share


More articles:


All Articles