ios手机上传照片反转问题

最近项目上前端写H5页面上传照片，ios手机上传照片出现翻转问题，然后各种找解决方法最后利用 Exif.js 进行处理。

　　Exif.js会判断照片参数：

　　　　3 旋转180°

　　　　6 旋转90°

　　　　8 旋转-90°

最后输出照片传给后端

然后出现问题就在这个地方，ipone11 与 iPhone 8p Exif.js判断参数都是6，

iPhone8p 旋转照片正常，然后iPhone11多旋转照片90°

注释代码，发现iPhone11照片正常，iPhone8p 上传照片，照片旋转90°，不可用

然后折腾好久，最后查看ios官方文档，发现ios从13.4.4版本已经处理好照片旋转。也就是说13.4.4以上版本照片都是正常

然后查看ipone8p的版本都是12 的未升级

然后前端做了这个处理：

　　

只需要增加一个检测方法，判断当前浏览器是否支持自动回正，如果支持则不处理，如果不支持则沿用之前的旋转方法。

// 用一张特殊的图片来检测当前浏览器是否对带 EXIF 信息的图片进行回正
// 方法来源: https://github.com/blueimp/JavaScript-Load-Image

// 一张 2x1 的 JPEG 图片, EXIF Orientation: 6
const testAutoOrientationImageURL =
    'data:image/jpeg;base64,/9j/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAYAAAA' +
    'AAAD/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBA' +
    'QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQE' +
    'BAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/AABEIAAEAAgMBEQACEQEDEQH/x' +
    'ABKAAEAAAAAAAAAAAAAAAAAAAALEAEAAAAAAAAAAAAAAAAAAAAAAQEAAAAAAAAAAAAAAAA' +
    'AAAAAEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwA/8H//2Q==';
let isImageAutomaticRotation;

export function detectImageAutomaticRotation() {
  return new Promise((resolve) => {
    if (isImageAutomaticRotation === undefined) {
      const img = new Image();

      img.onload = () => {
        // 如果图片变成 1x2，说明浏览器对图片进行了回正
        isImageAutomaticRotation = img.width === 1 && img.height === 2;

        resolve(isImageAutomaticRotation);
      };

      img.src = testAutoOrientationImageURL;
    } else {
      resolve(isImageAutomaticRotation);
    }
  });
}