【问题标题】：Is there a way to tell browsers to honor the jpeg exif orientation?有没有办法告诉浏览器尊重 jpeg exif 方向？
【发布时间】：2012-08-15 02:54:17
【问题描述】：

我知道 JPG 文件的自动旋转在浏览器中是禁用的。

他们无法启用它，因为它会破坏某些网站的布局。

有 CSS 属性吗？或javascript代码来实现这一点？或者是其他东西？或者这个问题的解决方案可能还不存在？

【问题讨论】：

当前的 CSS 规范忽略了 EXIF 数据。可能的解决方法是通过基于预处理图像文件名的脚本动态设置IMG 元素方向样式，其中包含指示正确方向的后缀。例如：一个简单的“a”、“b”、“c”、“d”代表 0、90、-90、180。
感谢您的提示/想法。但这仍然需要预处理。最好的办法是有一些 CSS 属性来告诉浏览器遵守 EXIF 方向。我想响应将在浏览器代码中。
据我所知，iOS Safari确实了解 EXIF 方向信息，至少来自用 iOS 设备拍摄的照片。
我认为最好的答案在这里：stackoverflow.com/questions/20600800/…

标签： html css browser jpeg exif

【解决方案1】：

CSS 图像方向：来自图像

来自规范https://www.w3.org/TR/css4-images/#the-image-orientation

6.2。在页面上定位图像：'image-orientation' 属性

图像方向：从图像

from-image：如果图像在其元数据中指定了方向，例如 EXIF，则该值计算为元数据指定正确定位图像所必需的角度。如有必要，该角度随后会被四舍五入并按照上述值进行归一化。如果其元数据中没有指定方向，则该值计算为“0deg”。

匹配的 Chrome 问题：https://bugs.chromium.org/p/chromium/issues/detail?id=158753

但是浏览器还没有支持：https://developer.mozilla.org/en/docs/Web/CSS/image-orientation#Browser_compatibility

通过JS旋转

有一个 JS sn-p 可以做到这一点：https://gist.github.com/runeb/c11f864cd7ead969a5f0

我的结论

我认为使用 imagemagick 之类的工具在服务器上旋转图像开销太大。

浏览器可以旋转图像，但网络应用程序需要给出如何显式旋转的建议。

浏览器中的这种显式旋转可以这样完成：https://stackoverflow.com/a/11832483/633961

【讨论】：

令人吃惊的是，如果您查看指向 JPEG 本身的直接 URL，那么所有浏览器都会正确显示它。然后你把图像放到一个元素的背景中，然后砰！出乎意料的是，它是颠倒的或横向的。甚至 Firefox 也只能正确处理其中一种情况（img，但不是背景）：softov.org/oria/image-orientation/index.html

【解决方案2】：

从 Chrome 81 开始，默认情况下遵循图像 EXIF 方向。最新的 Safari（截至目前为 13.1）也可以正常工作。

Firefox 尚未完全实现这一点（请参阅 Bugzilla issue #1616169）。

这是我找到的几个测试页面：

至于标准，image-orientation 属性现在在最新的CSS Images Level 3 spec draft 上被标记为弃用：

'image-orientation'
此属性已弃用，对于实现来说是可选的。

【讨论】：

我想知道 Chromium 开发人员在抽什么烟？他们怎么能默认启用这样的东西。我们的网站突然出现了各种各样的问题，图片到处旋转。

【解决方案3】：

从最新的 chromium/chrome 版本 81 开始，它将支持图像本身的 exif 方向。这意味着当图像中存在 exif 方向时，将用于定位图像，除非存在“image-orientation: none” CSS 属性。

在此更新之前，您可以使用任何其他解决方法来旋转图像或根据已知的图像方向手动旋转。然后较新的 chrome 81 会自动旋转图像。如果您需要避免自动旋转并继续使用与旧版 chrome 相同的变通选项，您可能需要设置 image-orientation: none，因为现在 image-orientation 值为 默认情况下来自图像。

image-orientation support chrome 81

【讨论】：

【解决方案4】：

我编写了一个小 php 脚本来旋转图像。请务必存储图像，以便在每次请求时重新计算它。

<?php

header("Content-type: image/jpeg");
$img = 'IMG URL';

$exif = @exif_read_data($img,0,true);
$orientation = @$exif['IFD0']['Orientation'];
if($orientation == 7 || $orientation == 8) {
    $degrees = 90;
} elseif($orientation == 5 || $orientation == 6) {
    $degrees = 270;
} elseif($orientation == 3 || $orientation == 4) {
    $degrees = 180;
} else {
    $degrees = 0;
}
$rotate = imagerotate(imagecreatefromjpeg($img), $degrees, 0);
imagejpeg($rotate);
imagedestroy($rotate);

?>

干杯

【讨论】：

【解决方案5】：

正如之前的海报所说，您将需要旋转图像本身。但除此之外，您可能还想在 EXIF 中设置/重置轮换标签。这样，您将避免尊重方向标签的观众再次旋转它。可以为您编辑 EXIF 的工具称为ExifTool，并且是免费的。

【讨论】：

【解决方案6】：

可以预先使用工具exifautotran 快速将EXIF 方向替换为默认方向（1，表示“左上角”）并自动旋转图像，使图像看起来与转换前相同.然后，您可以在网页中使用由此获得的 JPG 文件，而无需担心这些内容：

a@b:~/a/b/100_PANA$ exifautotran *.JPG
Executing: jpegtran -copy all -rotate 90 P1000638.JPG
Executing: jpegtran -copy all -rotate 270 P1000641.JPG
Executing: jpegtran -copy all -rotate 90 P1000642.JPG
Executing: jpegtran -copy all -rotate 90 P1000645.JPG
…

【讨论】：

另一个 cli 解决方案：ImageMagick magick mogrify -auto-orient imagefile.jpg

【解决方案7】：

使用https://github.com/blueimp/JavaScript-Load-Image

它包含一个演示 index.html 文件，该文件可以加载图像并在应用正确的旋转后正确显示它。

【讨论】：