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

Question

我知道在浏览器中禁用了JPG文件的自动轮换.

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

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

Answer 1

CSS图像方向:从图像

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

6.2.在页面上定位图像:"图像方向"属性

图像方向:从图像

from-image:如果图像在其元数据中指定了方向,例如EXIF,则此值将计算元数据指定的角度,以正确定位图像.如有必要,然后对该角度进行舍入并如上所述对值进行归一化.如果其元数据中未指定方向,则此值将计算为"0deg".

匹配Chrome-Issue: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 规范草案中被标记为已弃用：

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

Answer 3

从铬/铬版本 81 的最新更新开始，它将支持图像本身的 exif 方向。这意味着图像中存在的 exif 方向将用于定位图像，除非存在“image-orientation: none”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，并且是免费的。