Img 标签显示错误的方向

我有一个图像在这个链接: http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg

正如你所看到的，这是一个正常的图像与正确的方向。但是，当我将这个链接设置为图像标记的 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?

145216 次浏览
小开

你的形象实际上是颠倒的。但它有一个元属性“方向”，告诉观众它应该是旋转180度。有些设备/浏览器不遵守这个规则。

在 Chrome 中打开它: 正确的方式 在 FF 中打开它: 正确的方式向上 用 IE 打开: 倒过来

用油漆打开: 倒过来 在 Photoshop 中打开: 右上方。 等等。

小开

这是 EXIF 数据，你的三星手机采用。

小开

我找到了解决方案的一部分。图像现在具有指定照片方向的元数据。有一个新的 image-orientation的 CSS 规范。

只要把这个添加到你的 CSS 中:

img {
image-orientation: from-image;
}

根据2016年1月25日的规范，Firefox 和 iOS Safari (前缀)是唯一支持这一功能的浏览器。我仍然看到 Safari 和 Chrome 的问题。然而，移动 Safari 似乎天生支持没有 CSS 标签的方向。

我想我们必须等待，看看浏览器是否会开始支持 image-orientation。

小开
最佳答案

我忘记在这里加上我自己的答案了。我使用的是 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
小开

解决这个问题的一个简单方法就是使用 Photoshop 的 Save for Web 导出功能。在对话框中，可以选择删除图像的全部或大部分 EXIF 数据。我通常只保留版权和联系方式。另外，由于直接来自数码相机的图像对于网页显示来说是非常大的，所以通过 Save for the Web 来缩小它们是一个好主意。对于那些不懂 Photoshop 的人来说，我毫不怀疑有网上资源可以帮助他们调整图片大小，并去除任何不必要的 EXIF 数据。

小开

你可以使用 Exif-JS来检查图像的“方向”属性，然后根据需要应用 css 变换。

EXIF.getData(imageElement, function() {
var orientation = EXIF.getTag(this, "Orientation");


if(orientation == 6)
$(imageElement).css('transform', 'rotate(90deg)')
});
小开

在 CSS: image-orientation:from-image;得到更普遍的支持之前，我们正在使用 python 做一个服务器端解决方案。这是要点。检查 exif 数据的方向，然后相应地旋转图像并重新保存。

相对于客户端解决方案，我们更喜欢这个解决方案，因为它不需要加载额外的库客户端，并且这个操作只需要在文件上传时发生一次。

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)
小开

除非 PNG 帮我解决了这个问题。

小开

这个问题也快把我逼疯了。我在服务器端使用 PHP，所以无法使用@The Lazy Log (ruby) &@deweydb (python)解决方案。不过它给我指出了正确的方向。我使用 Imagick 的 getImageLocation ()将它固定在背面。

<?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);
}
?>

如果你想阅读更多，这里有一个链接

小开

这个答案使用 Exif-JS构建在 bsap 的答案之上，但不依赖于 jQuery，甚至与较老的浏览器也相当兼容。下面是示例 html 和 js 文件:

返回文章页面

<!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>

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";
}
});
};
小开

我认为在浏览器自动修复图像方向有一些问题，例如，如果我直接访问图片，它显示正确的方向，但显示错误的方向在一些退出 html 页面。

小开

如果你有 Linux 的访问权限，那么打开一个终端，cd 到包含你的图像的目录，然后运行

mogrify -auto-orient *

这将永久性地修复所有图像的方向问题。

小开

这是因为图像的原始方向并不像我们在图像查看器中看到的那样。 在这种情况下，图像在图像查看器中是垂直显示的，但实际上是水平显示的。

要解决这个问题，需要做到以下几点:

  1. 在图像编辑器中打开图像，如油漆(在窗口中)或 ImageMagick (在 Linux 中)。

  2. 旋转图像左/右。

  3. 保存图像。

这应该能永久解决这个问题。

小开

这是我的解决办法。在 Microsoft Paint 中创建一个新的 Blank.jpg 文件，然后打开(也是通过 ms Paint)文件 wo.jpg，该文件在 Chrome 中有不同的方向。选择 all 并复制到 wo.jpg 中。然后粘贴空白。省省吧。


提交答案