html - 有没有办法告诉浏览器尊重 jpeg exif 方向？

Question

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

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

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

Answer 1

CSS 图像方向：from-image

从规格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 片段可以做到这一点：https ://gist.github.com/runeb/c11f864cd7ead969a5f0

我的结论

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

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

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

Answer 2

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

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

这是我发现的几个测试页面：

• https://image-orientation-test.now.sh
• https://softov.org/oria/image-orientation

---

至于标准，该image-orientation属性现在在最新的CSS Images Level 3 规范草案中被标记为 deprecated ：

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

Answer 3

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

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

图像方向支持 chrome 81

Answer 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);

?>

干杯

Answer 5

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

Answer 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
…

Answer 7

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

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