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