1. 程式人生 > >IOS上傳豎向圖片會旋轉90度的解決辦法

IOS上傳豎向圖片會旋轉90度的解決辦法

原因:iOS手機豎著拍出的照片被添加了一個順時針旋轉90°的拍照方向;
解決:讀取圖片的拍照方向資訊,糾正至正確的方向。
參考地址:http://code.ciaoca.com/javascript/exif-js/
獲取圖片Orientation引數,=6是正常豎向拍攝,=3是橫線拍攝-180度,=8是豎向-180度拍攝。

以下為獲取方法,在圖片上傳成功的回撥函式中呼叫:

//解決IOS上傳豎向照片會旋轉90度的問題
  rotate(){
      let Orientation = null;
      let _filelist = $("#showImg")[0].files[0];
      $(".weui-uploader__file").removeClass("rotate-90");
      $(".weui-uploader__file").removeClass("rotate-180");
      $(".weui-uploader__file").removeClass("rotate-90-back");
      //獲取圖片Orientation引數
      EXIF.getData(_filelist, function()  {
          Orientation = EXIF.getTag(this, 'Orientation');
          if(Orientation){
            switch(Orientation){
                case 6:     // 正常豎拍
                    $(".weui-uploader__file").addClass("rotate-90");
                    break;
                case 3:     // 橫線拍-180
                    $(".weui-uploader__file").addClass("rotate-180");
                    break;
                case 8:     // 豎向拍-180
                    $(".weui-uploader__file").addClass("rotate-90-back");
                    break;
                default:
                    $(".weui-uploader__file").removeClass("rotate-90");
                    $(".weui-uploader__file").removeClass("rotate-180");
                    $(".weui-uploader__file").removeClass("rotate-90-back");
            }
        }
      });
  }
  

在這裡插入圖片描述
以下是css樣式:

.rotate-90{
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    transform:rotate(90deg);
}
.rotate-180{
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    transform:rotate(180deg);
}
.rotate-90-back{
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    transform:rotate(-90deg);
}

注意*:獲取圖片Orientation引數時的方法,用function 和箭頭函式 的this指向不同,應該用function,this指向呼叫該函式的物件。而箭頭函式指向window。