Html 有没有办法告诉浏览器尊重 jpeg exif 方向？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12026441/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a way to tell browsers to honor the jpeg exif orientation?
提问by Marc MAURICE
I know that the automatic rotation of JPG files is disabled in browsers.
我知道浏览器中禁用了 JPG 文件的自动旋转。
They can not enable it because it would break the layout of some websites.
他们无法启用它，因为它会破坏某些网站的布局。
Is there a CSS property? or javascript code to achieve that? or something else? or maybe the solution to this problem doesn't exist yet?
是否有 CSS 属性？或 javascript 代码来实现？或者是其他东西？或者也许这个问题的解决方案还不存在？
回答by guettli
CSS image-orientation: from-image
CSS 图像方向：来自图像
from the specs https://www.w3.org/TR/css4-images/#the-image-orientation
来自规范https://www.w3.org/TR/css4-images/#the-image-orientation
6.2. Orienting an Image on the Page: the ‘image-orientation' property
image-orientation: from-image
from-image: If the image has an orientation specified in its metadata, such as EXIF, this value computes to the angle that the metadata specifies is necessary to correctly orient the image. If necessary, this angle is then rounded and normalized as described above for an value. If there is no orientation specified in its metadata, this value computes to ‘0deg'.
6.2. 在页面上定位图像：“图像方向”属性
图像方向：来自图像
from-image：如果图像在其元数据中指定了方向，例如 EXIF，则此值计算为元数据指定的正确方向图像所需的角度。如有必要，该角度然后被圆整和归一化，如上所述的一个值。如果其元数据中未指定方向，则此值计算为“0deg”。
Matching Chrome-Issue: https://bugs.chromium.org/p/chromium/issues/detail?id=158753
匹配 Chrome 问题：https: //bugs.chromium.org/p/chromium/issues/detail?id=158753
But the browser support is not here yet: https://developer.mozilla.org/en/docs/Web/CSS/image-orientation#Browser_compatibility
但是浏览器支持还不在这里：https: //developer.mozilla.org/en/docs/Web/CSS/image-orientation#Browser_compatibility
Rotate via JS
通过 JS 旋转
There is a JS snippet to do this: https://gist.github.com/runeb/c11f864cd7ead969a5f0
有一个 JS 片段可以做到这一点：https: //gist.github.com/runeb/c11f864cd7ead969a5f0
My conclusion
我的结论
I think rotating the image on the server with tools like imagemagick is too much overhead.
我认为使用像 imagemagick 这样的工具在服务器上旋转图像的开销太大。
The browser can rotate the image, but the web application needs to give the advice how to rotate this explicitly.
浏览器可以旋转图像，但 Web 应用程序需要给出如何显式旋转图像的建议。
This explicit in browser rotation could be done like this: https://stackoverflow.com/a/11832483/633961
浏览器旋转中的这种显式可以像这样完成：https: //stackoverflow.com/a/11832483/633961
回答by Thom
I've written a little php script which rotates the image. Be sure to store the image in favour of just recalculate it each request.
我写了一个小的 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);
?>
Cheers
干杯
回答by MrFusion
Since Chrome 81, image EXIF orientation is respected by default. Latest Safari (13.1 as of now) is also working correctly.
从 Chrome 81 开始，默认情况下遵循图像 EXIF 方向。最新的 Safari（截至目前为 13.1）也可以正常工作。
Firefox hasn't fully implemented this (see Bugzilla issue #1616169).
Firefox 尚未完全实现这一点（请参阅Bugzilla 问题 #1616169）。
Here's a couple test pages I found:
这是我发现的几个测试页面：
As for the standard, the image-orientationproperty is now marked deprecated on the latest CSS Images Level 3 spec draft:
至于标准，该image-orientation属性现在在最新的CSS Images Level 3 规范草案中被标记为已弃用：
'image-orientation'
This property is deprecated, and is optional for implementations.
'image-orientation'
此属性已弃用，对于实现来说是可选的。
回答by Pranav K
From the latest update of chromium/chrome version 81, it will support exif orientation from image itself. This means that the exif orientation when present in an image, will be used to orient the image unless the "image-orientation: none" CSS property is present.
从铬/铬版本 81 的最新更新开始，它将支持图像本身的 exif 方向。这意味着图像中存在的 exif 方向将用于定位图像，除非存在“image-orientation: none”CSS 属性。
Before this update, you may used any other work around to rotate images or manually rotate based on the known image orientation. Then the newer chrome 81 will automatically rotate the image. If you need to avoid the automatic rotation and continue with the same work around option used for older chrome , you may need to set image-orientation: none, because now the image-orientation value is from-imageby default.
在此更新之前，您可以使用任何其他解决方法来旋转图像或根据已知的图像方向手动旋转。然后较新的 chrome 81 会自动旋转图像。如果您需要避免自动旋转并继续使用与旧版 chrome 相同的变通选项，您可能需要设置image-orientation: none，因为现在默认情况下image-orientation 值是from-image。
回答by Alice M.
The tool exifautotrancan be used beforehand to quickly replace the EXIF orientation with the default one (1, for “top left”) and to rotate the image automatically so that the image looks the same as before the transformation. You can then use the JPG files thus obtained in a webpage without worrying about that stuff:
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
…
回答by Jeroen Kransen
As the previous poster said, you will need to rotate the image itself. But next to that, you might also want to set/reset the rotation tag in the EXIF. That way you will avoid that viewers that do respect the orientation tag will rotate it again. A tool that can edit the EXIF for you is called ExifTool, and is free.
正如上一张海报所说，您需要旋转图像本身。但接下来，您可能还想设置/重置 EXIF 中的旋转标签。这样您就可以避免尊重方向标签的查看者再次旋转它。可以为您编辑 EXIF 的工具称为ExifTool，并且是免费的。
回答by masterxilo
Use https://github.com/blueimp/JavaScript-Load-Image
使用https://github.com/blueimp/JavaScript-Load-Image
It includes a demo index.html file that can load an image and display it correctly with the correct rotation applied.
它包括一个演示 index.html 文件，该文件可以加载图像并在应用正确旋转的情况下正确显示它。
