修正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 圖片的base64function 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);          },   });}

 

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