解決BootStrap Fileinput手機圖片上傳顯示旋轉(zhuǎn)問題
最近因為項目需要用到了bootstrap fileinput的插件，在使用蘋果手機上傳圖片預覽時，發(fā)現(xiàn)圖片方向和手機本地存儲方向不一致問題。后來通過查詢資料了解圖片具有EXIF(Exchangeable Image File Format)旋轉(zhuǎn)屬性標識，fileinput對旋轉(zhuǎn)進行了處理。預覽圖片顯示的為電腦圖片存放方向。
用iPhone手機通過home鍵朝向四個不同的方向進行拍照后，上傳照片顯示與預覽圖片方向并不一致。有點不明白其中緣由，后來發(fā)現(xiàn)了規(guī)則，只有Home鍵朝下和朝上的時候才會發(fā)現(xiàn)顯示不一致問題。解決方案如下：
fileinput.css、fileinput.min.css文件中，css樣式旋轉(zhuǎn)角度存在問題，修改以下樣式就可以啦。Home鍵朝下拍攝
.rotate-6 {
/*transform: rotate(90deg);原代碼*/
transform: rotate(270deg);
}
Home鍵朝上拍攝
.rotate-8 {
/*transform: rotate(270deg);原代碼*/
transform: rotate(90deg);
}
以上所述是小編給大家介紹的BootStrap Fileinput手機圖片上傳顯示旋轉(zhuǎn)問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了基于原生JS封裝的Modal對話框插件的示例代碼,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-09
由 element.appendChild(newNode) ,談開去
由 element.appendChild(newNode) ,談開去...2006-11-11
JS動態(tài)添加與刪除select中的Option對象(示例代碼)
本篇文章主要介紹了JS動態(tài)添加與刪除select中的Option對象(示例代碼) 需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
關(guān)于Iframe父頁面與子頁面之間的相互調(diào)用
下面小編就為大家?guī)硪黄P(guān)于Iframe父頁面與子頁面之間的相互調(diào)用。小編覺得挺不錯的，希望對大家有所幫助。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-11-11
本文主要介紹了DOM事件的相關(guān)知識。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
JavaScript lodash常見用法系列小結(jié)
本篇文章主要介紹了JavaScript lodash用法小結(jié)，非常不錯，具有參考借鑒價值，對于Javascript lodash教程感興趣的同學可以參考一下2016-08-08
JavaScript實現(xiàn)寫入文件到本地的方法【基于FileSaver.js插件】
這篇文章主要介紹了JavaScript實現(xiàn)寫入文件到本地的方法,結(jié)合實例形式分析了基于FileSaver.js插件實現(xiàn)保存文件到本地的相關(guān)操作技巧,并附帶FileSaver.js插件完整源碼,需要的朋友可以參考下2018-03-03
setTimeout函數(shù)兼容各主流瀏覽器運行執(zhí)行效果實例
setTimeout是一個很不錯的函數(shù)，網(wǎng)站頁面前端工程師經(jīng)常將其用于幾秒后執(zhí)行的動作，下文要講的setTimeout可以很好地兼容IE6，7,8,9以及谷歌等主流瀏覽器2013-06-06
關(guān)于js獲取radio和select的屬性并控制的代碼
對于聯(lián)動菜單大家都不會陌生了，但是這還是我第一次寫聯(lián)動的了。原理很簡單，但是自己寫起來就感覺還是有點難度的了2011-05-05
JavaScript使用cookie實現(xiàn)記住賬號密碼功能
這篇文章主要介紹了JavaScript使用cookie實現(xiàn)記住賬號密碼功能,本文直接給出完整測試代碼,需要的朋友可以參考下2015-04-04