前端 input上传照片 解决ios横屏问题

最近ios升级到13.5.1之后 input上传照片不需要再解决上传照片横屏的问题了

但这个版本之前的还是需要解决照片横屏问题

需要引入exif.js

github地址   github.com/exif-js/exi…

Orientation属性说明如下：

var str = navigator.userAgent.toLowerCase();
var ver = str.match(/cpu iphone os (.*?) like mac os/);
if (ver) {   
 var curVer = ver[1].replace(/_/g, ".")
}

上传图片EXIF获取图片信息的orientation

$('#upload').on('change', function () {  
  var file = this.files[0];//获取file组件中的文件  
  var orientation;   
 EXIF.getData(file, function () {   
     orientation = EXIF.getTag(this, 'Orientation'); 
   });  
  var reader = new FileReader();  
  reader.onload = function (e) {     
   getImgData(this.result, orientation, function (data) {    
        that.uploadImg = data      
      that.testImg(data)     
   });  
  };   
 reader.readAsDataURL(file); 
 });

根据判断系统版本号使用canvas旋转图片

function getImgData(img, dir, next) { 
   var image = new Image();  
  image.src = img;  
  image.onload = function () { 
       var degree = 0, drawWidth, drawHeight, width, height, scaleCanvas, curW, curH;   
     curW = drawWidth = this.width;      
  curH = drawHeight = this.height;    
    if (drawWidth > 729) {     
       scaleCanvas = 729 / drawWidth;     
   } else {          
  scaleCanvas = 1;    
    }        //以下改变一下图片大小   
     var canvas = document.createElement('canvas');      
  canvas.width = width = drawWidth * scaleCanvas; 
       canvas.height = height = drawHeight * scaleCanvas;      
  var context = canvas.getContext('2d');//判断图片方向，重置canvas大小，确定旋转角度，iphone默认的是home键在右方的横屏拍摄方式   
     if (ver) {      
      var verArr = curVer.split('.')       
     if (verArr[0] = 13 && verArr[1] >= 5 && verArr[2] >= 1) {     
           context.drawImage(this, 0, 0, curW, curH, 0, 0, drawWidth * scaleCanvas, drawHeight * scaleCanvas);    
        } else if (verArr[0] > 13) {   
             context.drawImage(this, 0, 0, curW, curH, 0, 0, drawWidth * scaleCanvas, drawHeight * scaleCanvas);    
        } else {    
            switch (dir) {     
//iphone横屏拍摄，此时home键在左侧          
          case 3:              
          degree = 180;            
            drawWidth = -width;        
                drawHeight = -height;      
                  break;                
    //iphone竖屏拍摄，此时home键在下方(正常拿手机的方向)         
           case 6:              
          canvas.width = height;            
            canvas.height = width;         
               degree = 90;              
          drawWidth = width;              
          drawHeight = -height;     
                   break;               
     //iphone竖屏拍摄，此时home键在上方      
              case 8:                 
       canvas.width = height;           
             canvas.height = width;       
                 degree = 270;            
            drawWidth = -width;       
                 drawHeight = height;   
                     break;         
       }               
 //使用canvas旋转校正       
         context.rotate(degree * Math.PI / 180);      
          if (dir == 3 || dir == 6 || dir == 8) {       
             context.drawImage(this, 0, 0, curW, curH, 0, 0, drawWidth, drawHeight);  
              } else {                
    context.drawImage(this, 0, 0, curW, curH, 0, 0, drawWidth * scaleCanvas, drawHeight * scaleCanvas);   
             }          
           }     
   } else {    
        context.drawImage(this, 0, 0, curW, curH, 0, 0, drawWidth * scaleCanvas, drawHeight * scaleCanvas);    
    }       
 //返回校正图片     
   next(canvas.toDataURL("image/jpeg", 1));    }}