原因:
后臺 都是使用 elemntUI 框架搭建的爽雄,其中有一個功能是 上傳圖片,發(fā)現(xiàn)一個bug沐鼠,對于 ios 豎著拍的照片挚瘟,上傳之后顯示,會自動旋轉(zhuǎn) 90度饲梭。
查了一些資料乘盖,說是 蘋果手機(jī)和 三星手機(jī) 有時會出現(xiàn)這樣的問題
總結(jié)是 有兩種方法可以解決:
A:使用 阿里云oss 的圖片處理
上傳到oss的圖片地址加上后綴,即完整的修改為:
imgUrl + '?x-oss-process=image/resize,m_mfit,h_100,w_100'
相關(guān)解說:
resize 是圖片縮放的
m-mfit 是 等比縮放憔涉,延伸出指定w與h的矩形框外的最小圖片
h_100,w_100 是表示 寬高值的設(shè)定
相關(guān)的資料鏈接為:
圖片縮放:[https://help.aliyun.com/document_detail/44688.html?spm=5176.11065259.1996646101.searchclickresult.7a974fcdeNF6Ey]
x-oss-process=image/resize,請求圖片附加參數(shù)不一樣订框,顯示大小和分辨率跟著改變,詳解:[https://blog.csdn.net/cplvfx/article/details/80292722]
B:Exif.js 讀取圖像的元數(shù)據(jù)
基本原理:exif.js 可以獲取圖片的 Orientation 信息兜叨,若是這個值為6穿扳,那么就表示是 ios豎向拍攝的圖片,需要處理国旷,否則不需要處理矛物。關(guān)于這個方法,我沒有試驗過议街,相關(guān)資料先記錄下:
VUE使用element UI的upload組件時ios上傳圖片旋轉(zhuǎn)90度問題:[https://blog.csdn.net/qq_23158083/article/details/82835357]
IOS上傳豎向圖片會旋轉(zhuǎn)90度的解決辦法:[https://blog.csdn.net/gaiery/article/details/82753772]
碰到這個問題了泽谨,所以將解決方案暫且記錄,備用,結(jié)束