img tag displays wrong orientation
HtmlCssImageHtml Problem Overview
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/
<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?
Html Solutions
Solution 1 - Html
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.
Solution 2 - Html
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.
Solution 3 - Html
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.
Solution 4 - Html
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
Solution 5 - Html
save as png solved the problem for me.
Solution 6 - Html
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)')
});
Solution 7 - Html
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:
<!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";
}
});
};
Solution 8 - Html
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) & @deweydb(python) solutions. However it pointed me to the right direction. I fixed it on the backed using Imagick's 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's 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 read more. http://php.net/manual/en/imagick.getimageorientation.php
Solution 9 - Html
It's the EXIF data that your Samsung phone incorporates.
Solution 10 - Html
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)
Solution 11 - Html
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.
Solution 12 - Html
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.
Solution 13 - Html
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.