修正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);
          }, 
  });
}