解决iphone 最新版ios13.4 拍照canvas里旋转问题以为这样就结束了么那么我们今天的主角来了在ios

在前几天的H5的开发中上传拍照的照片本地做照片合成但是在安卓(红米:20 pro)中拍照绘制到canvas上是翻转的需配合exif.js做一下处理

EXIF.getData(image, function() {
  let Orientation = EXIF.getTag(this, 'Orientation')
})

其中orientation参数说明

参数	行	列	旋转角度
1	上	左	0°
2	上	右	水平翻转
3	下	右	180°
4	下	左	垂直翻转
5	左	上	顺时针90°+水平翻转
6	右	上	顺时针90°
7	右	下	顺时针90°+垂直翻转
8	左	下	逆时针90°

参数我们知道了其实就是一个switch的判断下即可, 但是在安卓中如果为旋转的照片Orientation为undefined 所以在switch中还需判断下这种情况

switch (Orientation) {
 case 1: // 不需要选择，正常
   break
 case 6: // 需要顺时针（向左）90度旋转
   break
 case 8: // 需要逆时针（向右）90度旋转   
   break
 case 3: // 需要180度旋转
   break
 case undefined
   break
}

以为这样就结束了么那么我们今天的主角来了在ios 13.4的版本中不会旋转了但是在之前的版本中还是会旋转90度而且更神奇的是ios 13.4中不旋转但是Orientation他还是等于6... 所以就会有接下来的方案

方法一:判断IOS 版本如果大于13.4则不旋转

方法二:检查浏览器是否支持自动图像定向

if (!$.global.document) return
    // black+white 3x2 JPEG, with the following meta information set:
    // - EXIF Orientation: 6 (Rotated 90° CCW)
    // Image data layout (B=black, F=white):
    // BFF
    // BBB
    var testImageURL =
      'data:image/jpeg;base64,/9j/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAYAAAA' +
      'AAAD/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBA' +
      'QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQE' +
      'BAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/AABEIAAIAAwMBEQACEQEDEQH/x' +
      'ABRAAEAAAAAAAAAAAAAAAAAAAAKEAEBAQADAQEAAAAAAAAAAAAGBQQDCAkCBwEBAAAAAAA' +
      'AAAAAAAAAAAAAABEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AG8T9NfSMEVMhQ' +
      'voP3fFiRZ+MTHDifa/95OFSZU5OzRzxkyejv8ciEfhSceSXGjS8eSdLnZc2HDm4M3BxcXw' +
      'H/9k='
    var img = document.createElement('img')
    img.onload = function () {
      // Check if the browser supports automatic image orientation:
      $.orientation = img.width === 2 && img.height === 3
      
    }
    img.src = testImageURL

参考链接：https://github.com/blueimp/JavaScript-Load-Image/blob/master/js/load-image-orientation.js