【问题标题】:How to force to show image orientation?如何强制显示图像方向?
【发布时间】:2020-07-07 18:08:18
【问题描述】:

我正在使用 multer node 和 express 将图像上传到我的应用程序。但有些图片在客户端显示时会旋转 90 度。

为什么会这样?,我该如何解决?

顺便说一句,我在客户端和上传过程中使用vue,当然我使用formdata

更新

经过上述人员的研究和cmets,这是一个EXIF问题。有什么代码可以解决这个问题吗?

【问题讨论】:

标签: node.js express vue.js multer


【解决方案1】:

您遇到的行为可能是由Exif Orientation 元数据引起的。

Stackoverflow 上还有一个关于这个问题的问题:JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images

selected answer 指向一个名为 Javascript-Load-Image 的项目作为可能的解决方案,这基本上意味着您在渲染图像时必须考虑方向以获得一致的行为。

另一种可能的选择是在后端编辑/删除方向元数据。

查看以下资源了解更多信息:

JPEG Image Orientation and Exif

【讨论】:

  • 嗨 @Romulo 我明白了,但这发生在所有使用这个 multer 库的人身上吗?还是只有我?,因为我看到的每个教程都没有提到 exif 方向
  • 我会说这和 Multer 一点关系都没有。它与您的图像文件更相关。获取图像元数据工具并检查正在旋转渲染的图像的方向元数据。
  • 好的,但它很烦人,因为在我看到的每个 youtube 教程中,我都没有看到有人抱怨这个
【解决方案2】:

这很可能是由Exif 元数据引起的(就像@Romulo 建议的那样)。

浏览器在显示图像时会忽略 Exif 元数据,这就是您出现这种行为的原因。

要检查这是否与 Exif 有关,请以不同的手机方向拍摄 4 张照片(横向左侧、横向右侧、纵向、倒置)。其中一个将正确显示,而其他 3 个将被旋转。 (另请注意,如果您使用前置摄像头,图像也会被镜像)。

并非所有拍照手机都这样做,但 iOS 始终如此。原因是性能。旋转手机时,传感器也会旋转,拍摄的照片不会考虑旋转。

要正确显示照片,需要旋转图像,但如果您只是更改 Exif 元数据,则无需这样做。当然,任何显示图像的客户端都需要知道这些信息(iOS 照片等都知道)。

这与multer无关,但与存储的图像有关。

底线是您需要旋转图像来弥补这一点。

查看this npm package 以在服务器端调整您的图像。

【讨论】:

  • 我也在搜索这个,我们都同意这是 EXIF 的问题。你有什么简单的代码可以做到这一点吗?
猜你喜欢
  • 1970-01-01
  • 2015-11-30
  • 2015-11-14
  • 1970-01-01
  • 2019-11-27
  • 1970-01-01
  • 2016-03-13
  • 1970-01-01
  • 2015-09-09
相关资源
最近更新 更多