ios拍照上传之后在h5页面被旋转90°

一、遇到的问题

ios上传图片到服务器，渲染到页面上之后会旋转90度,android显示正常。

二、分析原因：

ios相机加入了方向传感器，能够记录相机拍摄的方向，这些信息保存在照片中，当相机浏览这些照片的时候，相机可以根据照片中的方向信息，结合此时相机的方向，对照片进行旋转

三、解决方案：

iOS拍摄的图片提供了EXIF(可交换图像文件格式:Exchangeable image file format)信息，Orientation 旋转信息等存储在其中。

项目中我们使用的是七牛云，提供了解决方案：

判断是否有旋转：
上传到七牛云上的路径 拼接上 + ''?imageInfo"
如果有旋转返回数据
{"size":2645332,"format":"jpeg","width":4032,"height":3024,"colorModel":"ycbcr","orientation":"Right-top"}
没有旋转返回数据
{"size":371939,"format":"png","width":375,"height":1078,"colorModel":"rgba"}

很显然： 有orientation说明有旋转问题

让图片不旋转：图片路径后面拼接 + "?imageMogr2/auto-orient"(可以不判断是否有旋转信息，直接将所有的图片拼接上，简单粗暴)

其他第三方云存储服务：腾讯云等也会提供类似的解决方案

未使用第三方服务： 可以使用exif.js进行解决

读取照片的 Exif 信息，判断 Orientation 的值，然后将图片进行相应的旋转

image.png