利用exif.js解决ios手机上传竖拍照片旋转90度问题_js移动端相机拍摄导致图片旋转-CSDN博客

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

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

利用exif.js读取照片的拍摄信息，详见 http://code.ciaoca.com/javascript/exif-js/

这里主要用到Orientation属性。

Orientation属性说明如下：

旋转角度	参数
0°	1
顺时针90°	6
逆时针90°	8
180°	3

下面就直接上代码了。

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

自己写的是uploadImage.js。

html5测试页面如下：

[javascript]view plain copy 
        
 <!DOCTYPE html>  
 <html>  
 <head>  
     <meta charset="utf-8">  
     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
     <title>图片上传</title>  
     <script type="text/javascript" src="js/jquery-1.8.3.js"></script>  
     <script type="text/javascript" src="js/uploadPicture/uploadImage.js" ></script>  
         <script type="text/javascript" src="js/exif.js" ></script>  
     <script>  
   
     </script>  
 </head>  
 <body>  
     <div style="height: 50px; line-height: 50px;text-align: center;border-bottom: 1px solid #171E28;">  
             上传图片:  
             <input type="file" accept="image/*" id="uploadImage" capture="camera" οnchange="selectFileImage(this);" />  
         </div>  
         <div style="margin-top: 10px;">  
             <img alt="preview" src="" id="myImage"/>  
         </div>  
 </body>  
 </html>  

uploadImage.js如下：

[javascript]view plain copy 
        
 function selectFileImage(fileObj) {  
     var file = fileObj.files['0'];  
     //图片方向角 added by lzk  
     var Orientation = null;  
       
     if (file) {  
         console.log("正在上传,请稍后...");  
         var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式  
         if (!rFilter.test(file.type)) {  
             //showMyTips("请选择jpeg、png格式的图片", false);  
             return;  
         }  
         // var URL = URL || webkitURL;  
         //获取照片方向角属性，用户旋转控制  
         EXIF.getData(file, function() {  
            // alert(EXIF.pretty(this));  
             EXIF.getAllTags(this);   
             //alert(EXIF.getTag(this, 'Orientation'));   
             Orientation = EXIF.getTag(this, 'Orientation');  
             //return;  
         });  
           
         var oReader = new FileReader();  
         oReader.onload = function(e) {  
             //var blob = URL.createObjectURL(file);  
             //_compress(blob, file, basePath);  
             var image = new Image();  
             image.src = e.target.result;  
             image.onload = function() {  
                 var expectWidth = this.naturalWidth;  
                 var expectHeight = this.naturalHeight;  
                   
                 if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) {  
                     expectWidth = 800;  
                     expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;  
                 } else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) {  
                     expectHeight = 1200;  
                     expectWidth = expectHeight * this.naturalWidth / this.naturalHeight;  
                 }  
                 var canvas = document.createElement("canvas");  
                 var ctx = canvas.getContext("2d");  
                 canvas.width = expectWidth;  
                 canvas.height = expectHeight;  
                 ctx.drawImage(this, 0, 0, expectWidth, expectHeight);  
                 var base64 = null;  
                 //修复ios  
                 if (navigator.userAgent.match(/iphone/i)) {  
                     console.log('iphone');  
                     //alert(expectWidth + ',' + expectHeight);  
                     //如果方向角不为1，都需要进行旋转 added by lzk  
                     if(Orientation != "" && Orientation != 1){  
                         alert('旋转处理');  
                         switch(Orientation){  
                             case 6://需要顺时针（向左）90度旋转  
                                 alert('需要顺时针（向左）90度旋转');  
                                 rotateImg(this,'left',canvas);  
                                 break;  
                             case 8://需要逆时针（向右）90度旋转  
                                 alert('需要顺时针（向右）90度旋转');  
                                 rotateImg(this,'right',canvas);  
                                 break;  
                             case 3://需要180度旋转  
                                 alert('需要180度旋转');  
                                 rotateImg(this,'right',canvas);//转两次  
                                 rotateImg(this,'right',canvas);  
                                 break;  
                         }         
                     }  
                       
                     /*var mpImg = new MegaPixImage(image); 
                     mpImg.render(canvas, { 
                         maxWidth: 800, 
                         maxHeight: 1200, 
                         quality: 0.8, 
                         orientation: 8 
                     });*/  
                     base64 = canvas.toDataURL("image/jpeg", 0.8);  
                 }else if (navigator.userAgent.match(/Android/i)) {// 修复android  
                     var encoder = new JPEGEncoder();  
                     base64 = encoder.encode(ctx.getImageData(0, 0, expectWidth, expectHeight), 80);  
                 }else{  
                     //alert(Orientation);  
                     if(Orientation != "" && Orientation != 1){  
                         //alert('旋转处理');  
                         switch(Orientation){  
                             case 6://需要顺时针（向左）90度旋转  
                                 alert('需要顺时针（向左）90度旋转');  
                                 rotateImg(this,'left',canvas);  
                                 break;  
                             case 8://需要逆时针（向右）90度旋转  
                                 alert('需要顺时针（向右）90度旋转');  
                                 rotateImg(this,'right',canvas);  
                                 break;  
                             case 3://需要180度旋转  
                                 alert('需要180度旋转');  
                                 rotateImg(this,'right',canvas);//转两次  
                                 rotateImg(this,'right',canvas);  
                                 break;  
                         }         
                     }  
                       
                     base64 = canvas.toDataURL("image/jpeg", 0.8);  
                 }  
                 //uploadImage(base64);  
                 $("#myImage").attr("src", base64);  
             };  
         };  
         oReader.readAsDataURL(file);  
     }  
 }  
   
 //对图片旋转处理 added by lzk  
 function rotateImg(img, direction,canvas) {    
         //alert(img);  
         //最小与最大旋转方向，图片旋转4次后回到原方向    
         var min_step = 0;    
         var max_step = 3;    
         //var img = document.getElementById(pid);    
         if (img == null)return;    
         //img的高度和宽度不能在img元素隐藏后获取，否则会出错    
         var height = img.height;    
         var width = img.width;    
         //var step = img.getAttribute('step');    
         var step = 2;    
         if (step == null) {    
             step = min_step;    
         }    
         if (direction == 'right') {    
             step++;    
             //旋转到原位置，即超过最大值    
             step > max_step && (step = min_step);    
         } else {    
             step--;    
             step < min_step && (step = max_step);    
         }    
         //img.setAttribute('step', step);    
         /*var canvas = document.getElementById('pic_' + pid);   
         if (canvas == null) {   
             img.style.display = 'none';   
             canvas = document.createElement('canvas');   
             canvas.setAttribute('id', 'pic_' + pid);   
             img.parentNode.appendChild(canvas);   
         }  */  
         //旋转角度以弧度值为参数    
         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;    
         }    
     }    