详解利用exif.js解决ios手机上传竖拍照片旋转90度问题

HTML5+canvas进行移动端手机照片上传时，发现iOS手机上传竖拍照片会逆时针旋转90度，横拍照片无此问题；Android手机没这个问题。

因此解决这个问题的思路是：获取到照片拍摄的方向角，对非横拍的ios照片进行角度旋转修正。

利用exif.js读取照片的拍摄信息，这里主要用到Orientation属性。

Orientation属性说明如下：

下面就直接上代码了。

主要有html5页面和一个js，示例功能包含了图片压缩和旋转。

自己写的是uploadImage.js。

html5测试页面如下：

 
 
 
   
   
   
   
   
     
   
 
 
   
      上传图片: 
       max_step && (step = min_step);  
    } else {  
      step--;  
      step < min_step && (step = max_step);  
    }  
    //img.setAttribute('step', step);  
     
    //旋转角度以弧度值为参数  
    var degree = step * 90 * Math.PI / 180;  
    var ctx = canvas.getContext('2d');  
    switch (step) {  
      case 0:  
 canvas.width = width;  
 canvas.height = height;  
 ctx.drawImage(img, 0, 0);  
 break;  
      case 1:  
 canvas.width = height;  
 canvas.height = width;  
 ctx.rotate(degree);  
 ctx.drawImage(img, 0, -height);  
 break;  
      case 2:  
 canvas.width = width;  
 canvas.height = height;  
 ctx.rotate(degree);  
 ctx.drawImage(img, -width, -height);  
 break;  
      case 3:  
 canvas.width = height;  
 canvas.height = width;  
 ctx.rotate(degree);  
 ctx.drawImage(img, -width, 0);  
 break;  
    }  
  }  

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。