【发布时间】:2020-07-07 18:08:18
【问题描述】:
我正在使用 multer node 和 express 将图像上传到我的应用程序。但有些图片在客户端显示时会旋转 90 度。
为什么会这样?,我该如何解决?
顺便说一句,我在客户端和上传过程中使用vue,当然我使用formdata
更新
经过上述人员的研究和cmets,这是一个EXIF问题。有什么代码可以解决这个问题吗?
【问题讨论】:
标签: node.js express vue.js multer
我正在使用 multer node 和 express 将图像上传到我的应用程序。但有些图片在客户端显示时会旋转 90 度。
为什么会这样?,我该如何解决?
顺便说一句,我在客户端和上传过程中使用vue,当然我使用formdata
更新
经过上述人员的研究和cmets,这是一个EXIF问题。有什么代码可以解决这个问题吗?
【问题讨论】:
标签: node.js express vue.js multer
您遇到的行为可能是由Exif Orientation 元数据引起的。
Stackoverflow 上还有一个关于这个问题的问题:JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images
selected answer 指向一个名为 Javascript-Load-Image 的项目作为可能的解决方案,这基本上意味着您在渲染图像时必须考虑方向以获得一致的行为。
另一种可能的选择是在后端编辑/删除方向元数据。
查看以下资源了解更多信息:
【讨论】:
这很可能是由Exif 元数据引起的(就像@Romulo 建议的那样)。
浏览器在显示图像时会忽略 Exif 元数据,这就是您出现这种行为的原因。
要检查这是否与 Exif 有关,请以不同的手机方向拍摄 4 张照片(横向左侧、横向右侧、纵向、倒置)。其中一个将正确显示,而其他 3 个将被旋转。 (另请注意,如果您使用前置摄像头,图像也会被镜像)。
并非所有拍照手机都这样做,但 iOS 始终如此。原因是性能。旋转手机时,传感器也会旋转,拍摄的照片不会考虑旋转。
要正确显示照片,需要旋转图像,但如果您只是更改 Exif 元数据,则无需这样做。当然,任何显示图像的客户端都需要知道这些信息(iOS 照片等都知道)。
这与multer无关,但与存储的图像有关。
底线是您需要旋转图像来弥补这一点。
查看this npm package 以在服务器端调整您的图像。
【讨论】: