Html img 标签显示错误的方向
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24658365/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
img tag displays wrong orientation
提问by The Lazy Log
I have an image at this link: http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg
我在这个链接有一张图片：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/
如您所见，这是一张具有正确方向的正常图像。但是，当我将此链接设置为图像标签的 src 属性时，图像会颠倒。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?
你知道发生了什么吗？
采纳答案by The Lazy Log
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.
我忘了在这里添加我自己的答案。我使用的是 Ruby on Rails，所以它可能不适用于 PHP 或其他框架中的项目。就我而言，我使用 Carrierwave gem 上传图像。我的解决方案是在上传器类中添加以下代码以在保存文件之前修复 EXIF 问题。
process :fix_exif_rotation
def fix_exif_rotation
manipulate! do |img|
img.auto_orient!
img = yield(img) if block_given?
img
end
end
回答by Chet
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.
我找到了解决方案的一部分。图像现在具有指定照片方向的元数据。有一个新的CSS 规范image-orientation。
Just add this to your CSS:
只需将其添加到您的 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.
根据截至 2016 年 1 月 25 日的规范，Firefox 和 iOS Safari（在前缀后面）是唯一支持此功能的浏览器。我仍然看到 Safari 和 Chrome 出现问题。然而，移动版 Safari 似乎原生支持没有 CSS 标签的方向。
I suppose we'll have to wait and see if browsers wills start supporting image-orientation.
我想我们将不得不等待，看看浏览器是否会开始支持image-orientation.
回答by i-CONICA
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.
你的形象实际上是颠倒的。但它有一个元属性“方向”，它告诉观众它应该旋转 180 度。某些设备/查看器不遵守此规则。
Open it in Chrome: right way up Open it in FF: right way up Open it in IE: upside down
在 Chrome 中打开它：正确的方式在 FF 中打开它：正确的方式在 IE 中打开它：颠倒
Open it in Paint: Upside down Open it in Photoshop: Right way up. etc.
在 Paint 中打开它：颠倒在 Photoshop 中打开它：正确向上。等等。
回答by Paul Chris Jones
If you have access to Linux, then open a terminal, cd to the directory containing your images and then run
如果您可以访问 Linux，请打开终端，cd 到包含图像的目录，然后运行
mogrify -auto-orient *
This should permanently fix the orientation issues on all the images.
这应该永久修复所有图像的方向问题。
回答by Seyed Mostafa Mousavi Kahaki
save as png solved the problem for me.
另存为 png 为我解决了这个问题。
回答by VMQ
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:
此答案基于 bsap 使用Exif-JS的答案，但不依赖于 jQuery，并且即使与较旧的浏览器也相当兼容。以下是示例 html 和 js 文件：
rotate.html:
旋转.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:
旋转.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";
}
});
};
回答by bsap
You can use Exif-JS, to check the "Orientation" property of the image. Then apply a css transform as needed.
您可以使用Exif-JS来检查图像的“方向”属性。然后根据需要应用 css 转换。
EXIF.getData(imageElement, function() {
var orientation = EXIF.getTag(this, "Orientation");
if(orientation == 6)
$(imageElement).css('transform', 'rotate(90deg)')
});
回答by user4504661
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，所以我无法使用 @The Lazy Log(ruby) 和 @deweydb(python) 解决方案。然而，它为我指明了正确的方向。我使用 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'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
如果你想阅读更多，这里是链接。http://php.net/manual/en/imagick.getimageorientation.php
回答by Trace DeCoy
It's the EXIF data that your Samsung phone incorporates.
这是您的三星手机包含的 EXIF 数据。
回答by deweydb
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.
在 CSS:image-orientation:from-image;得到更普遍支持之前，我们正在使用 python 进行服务器端解决方案。这是它的要点。您检查 exif 数据的方向，然后相应地旋转图像并重新保存。
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)
