来自 iOS 的肖像图像在 Windows 上的浏览​​器中呈现风景

Posted 2023-03-12

【中文标题】来自 iOS 的肖像图像在 Windows 上的浏览​​器中呈现风景

【英文标题】：portrait image from iOS renders landscape in browser on windows

【发布时间】：2015-09-19 10:25:49

【问题描述】：

你到底是怎么解决这个问题的……：

两张照片是在 iphone 6 上拍摄的。一张是纵向的（拿着杯子的脸），另一张是横向的（鸡蛋盒）。

当图像在 windows 上的浏览​​器中以 img 标记呈现时，纵向图像呈现横向。但是，相同的 html 在苹果设备的浏览器中呈现肖像图像肖像。

当您在 Windows 资源管理器中检查这两个图像的属性时，没有任何东西可以作为 Windows 浏览器中纵向渲染景观的指示跳出..？巧合的是，windows 在 windows 资源管理器中正确呈现预览。它似乎只是 windows 中的浏览器问题。

我也反过来测试了这个，来自android的纵向和横向在苹果和windows上的img标签中呈现......两者都很好。

在下面的 sn-p 中，图片以 iPhone 拍摄时的原始形式提供。

imgmax-height: 200px;

<h2>Image taken in portait on iphone 6</h2>
<img src="http://www.beingyesterday.com/wp-content/uploads/2015/09/41de7162e3e0653f8a896ae82c2484cd5f19c1b9_1.jpeg"/>


<h2>Image taken in landscape on iphone 6</h2>
<img src="http://www.beingyesterday.com/wp-content/uploads/2015/09/ec7a1bd0088b5e5dd55b285c470aee14f4be2a43_1.jpeg"/>

【参考方案1】：

包括 iphone 在内的一些手机将纵向图像保存为横向，并仅添加 EXIF 元数据来旋转图像。

问题在于，并非所有系统都一致地管理此元数据。有些正在应用转换，有些正在部分应用，有些则没有。

网站上的图片不应该使用这个，所有图片都应该先转换：

使用您最喜欢的图像编辑器 在上传时使用您的网络服务器

在这里发现更多http://www.daveperrett.com/articles/2012/07/28/exif-orientation-handling-is-a-ghetto/

编辑：我看到您使用 Wordpress。问题是 6 年前开过票，但所有票都已关闭或待处理。不过有一个插件：https://wordpress.org/plugins/image-rotation-fixer/

【讨论】：

@Kustolovoc，感谢您的详细回复。我实际上正在构建一个带有照片上传的节点 js 应用程序。但是，我现在知道要问什么问题才能找到正确的解决方案。似乎有一些 npm 包，例如 npmjs.com/package/jpegorientation 谢天谢地，我认为我不必考虑 png 图像校正。