修正ios h5上傳圖時的圖片方向問題

 .ios上傳會在exif中帶一個 Orientation的屬性，這個屬性在windows中不會生效，在ios瀏覽器中會生效，造成圖片在windows資源管理器中與ios瀏覽器中方向不一致 

為了用戶體驗，需要把圖片矯正成正常的圖片。 短文

需要用到一個 exif 插件 地址 https://github.com/exif-js/exif-js/

代碼

function check_file(files){
         //校驗收集表單數據
//          var formdata = new FormData(); 
         if(!files[0] || !/image\/\w+/.test(files[0].type)){
             
             $.hidePreloader();
                $('.li_imgs').children('.imgs').last().children().first().removeAttr('disabled');
                _deny_request = false;
                return;
             }
         
//          formdata.append("imgFile0", files[0]); 
         
         //處理IOS 拍照方向
          EXIF.getData(files[0],function(){
              Orientation = EXIF.getTag(this,'Orientation');
          });
          var reader = new FileReader();
          reader.readAsDataURL(files[0]);
          reader.onload = function(e) {  
            getImgData(e); 
          }
          return;
}

//e 圖片的base64
function getImgData(e){
     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  
            switch(Orientation){  
                case 6://需要順時針（向左）90度旋轉  
                    rotateImg(this,'left',canvas);  
                    break;  
                case 8://需要逆時針（向右）90度旋轉  
                    rotateImg(this,'right',canvas);  
                    break;  
                case 3://需要180度旋轉  
                    rotateImg(this,'right',canvas);//轉兩次  
                    rotateImg(this,'right',canvas);  
                    break;  
            }         
        base64 = canvas.toDataURL("image/jpeg", 0.7).substring(22);//這里處理一下base64編碼頭，以便php的 base64_decode可以解析，壓縮一下圖片，否則會413錯誤

        displayImg(base64);
    }
}


//對圖片旋轉處理   
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);    
        }    
        //旋轉角度以弧度值為參數    
        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;    
        }    
}  


/**
 * android / ios 圖片上傳
 */
function displayImg(imgBinaryContentbase64){
   remove_file_input($('.li_imgs').children('.imgs').last().children().first()); //刪除舊的file域
   $.showPreloader(_up_img_msg);
  var data = {};
  if(_IsIosDev){
      data['ios'] = imgBinaryContentbase64;
      }else{
          data['content'] = imgBinaryContentbase64;
          }
  
  $.ajax({
      type:'post',
      url:'?c=bzymgr/washcar&a=uploadAndroidImg&openid=<?php echo $this->openid;?>',
      data:data,
      dataType: "json",
      async: true,  
      success:function(res){
          if(res=='0'){
              public_toast('上傳失敗，請稍后重試',1000);
              return;
              }
          var html = '';
          for(var i in res){
              html += '<div class="imgs">\
                           <img src="'+res[i]+'" class="thumb_img"/>\
                           <b class="img_cancel" onclick="remove_img(this)">X</b>\
                    </div>';
              //存儲到localStorage
              add_imgs_LocalStorage(res[i]);
              }
          //插入dom
          $('.li_imgs').children('.imgs').last().before(html);
          setTimeout(function(){
                  $.hidePreloader();
                  _deny_request = false;
                  },1000);
      },  
      error:function(){
          public_toast('服務器離家出走了，請稍后重試',2000);
          }, 
  });
}