选择较低分辨率时，iOS会旋转图像(HTML5输入文件)

Question

我正在开发一个web应用程序，它允许用户将文件上传到我们的CDN网络，然后在web应用程序上显示图像。然而，当我通过iOS (Safari)和其他浏览器上传图片时，我注意到了一些奇怪的事情。

当选择最高分辨率的图像时，将以正确的尺寸和形状上传图像。

但是，当选择较低的分辨率时，上传的图像最终会在上传时旋转。我不确定这是发生在CDN上，还是发生在iOS文件选择功能上，但这很奇怪，因为它可以很好地处理“实际大小”的图像。

您可以看到下面的图像，以重现该错误。

注意图像的形状和文件大小。作为“实际大小”的文件大小是3.5MB！

​

​

现在，在我们点击“选择图像大小”后，会出现如下内容。我会选择“中等”。

​

​

之后，您将看到文件大小仅为164KB。减少-95.31%。

​

​

然后，在上传图片后，注意图片的形状。你会看到它是不同的旋转。

​

​

有谁知道为什么会发生这种情况吗？我不确定这是否与我使用的CDN有关，因为正如我之前所说的，当选择“实际大小”的图片时，上传的图片是完全正常的。只有当通过iOS“文件选择器”改变大小时，它才会改变旋转。

另外，我担心的另一个问题是，这些高分辨率图像对我的应用程序来说并不是必需的。有时我们谈论的是+8MB的图像，由于它们的高分辨率和尺寸。有没有人知道是否有可能将iOS/Android上传的图片大小指定为默认大小-这样用户就不需要做任何事情了？那将是最理想的。

Answer 1

在由iOS选择期间生成的图像缺少该图像的EXIF数据中的方向数据。这就是为什么当你上传实际的图片时，图片是正确的，它看起来方向正确，但当它的大小不同时，它是不正确的。你可以在https://exifinfo.org/上传原件和不同的尺寸来检查。您将在EXIF部分中看到不同的方向数据。

由于这是iOS Safari特有的功能，您不能依赖于能够选择正在上传的多种大小的图像。更可靠、跨平台的解决方案是使用Canvas自己调整映像的大小。然而，这可能仍然需要用户上传完整大小的图像，然后您必须在画布上处理它，并将其上传到您的API。