我有一个 Angular 应用程序，它允许您选择个人资料图片。执行测试时我注意到，当我以纵向模式从 iPhone 拍摄图像并将图像上传到我的应用程序时，它会旋转显示，但是如果我以横向模式拍摄照片，则图像会正确显示。此外，在 Android 设备上执行相同的测试，结果是在纵向模式或横向模式下图像都能正确显示。我的问题是如何避免这种行为，因为我希望图像始终在不旋转的情况下显示。下面是所提到的问题的示例:
所有上传的图片都应该这样显示:
我在服务器上物理检查了从 ios 上传的文件，没有一个是旋转的。问题似乎出在应用程序的可视化上。
我应该怎么做才能让图像始终在我的 Angular 应用程序中不旋转地显示？
我做了一个 stackblitz 来展示这个组件的实现
我很感激有人可以帮助我，并向我解释为什么会出现这种奇怪的行为。
非常感谢!
最佳答案
这里的问题是一些叫做 EXIF 的数据。这是一组与图像一起捕获的额外元数据，其中包含位置、时间、孔径以及方向。
图片上传到服务器后如果想正确显示，可以简单地根据exif方向旋转图片，然后剥离exif数据。这样，无论是在理解 EXIF 的浏览器还是不理解 EXIF 的浏览器中，图像始终“正确”显示。 这在这里解释:Fix iOS picture orientation after upload PHP
如果您想在上传之前正确显示图像(例如预览)，最好的办法是使用 HTML Canvas ，然后根据图像的方向旋转图像。请参阅此主题以获取更多信息:JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images
关于javascript - 如何避免 Angular 4 应用程序中的图像旋转，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57649822/