CSS图像方向：从图像

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 issue #1616169）。

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

对于标准，image-orientation属性现在在最新的CSS Images Level 3 spec draft上已被标记为不推荐使用：

“图像方向”
该属性已弃用，对于实现是可选的。

Answer 3

从最新版本的铬/铬版本81开始，它将支持图像本身的exif方向。这意味着在图像中存在exif方向时，除非存在“ image-orientation：none” CSS属性，否则它将用于对图像进行定向。

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

image-orientation support chrome 81

Answer 4

我写了一个用于旋转图像的小脚本。请务必存储图像，以便只是重新计算每个请求。

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

我们使用imagemagick根据exif-orientation信息旋转图像。也许这对你来说是一个选择？

Answer 6

如上一张海报所述，您需要旋转图像本身。但除此之外，您可能还想在EXIF中设置/重置旋转标记。这样你就可以避免那些尊重方向标签的观众会再次旋转它。可以为您编辑EXIF的工具称为ExifTool，并且是免费的。

Answer 7

可以预先使用工具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 8

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

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

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

8 个答案:

CSS图像方向：从图像

通过JS旋转

我的结论