IOS上傳豎向圖片會旋轉90度的解決辦法
阿新 • • 發佈:2019-02-12
原因: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。