解決BootStrap Fileinput手機(jī)圖片上傳顯示旋轉(zhuǎn)問題
更新時間：2017年06月01日 14:48:02 作者：咕嚕嚕ooO小鹿
這篇文章主要介紹了 BootStrap Fileinput手機(jī)圖片上傳顯示旋轉(zhuǎn)問題,需要的朋友可以參考下
最近因為項目需要用到了bootstrap fileinput的插件，在使用蘋果手機(jī)上傳圖片預(yù)覽時，發(fā)現(xiàn)圖片方向和手機(jī)本地存儲方向不一致問題。后來通過查詢資料了解圖片具有EXIF(Exchangeable Image File Format)旋轉(zhuǎn)屬性標(biāo)識，fileinput對旋轉(zhuǎn)進(jìn)行了處理。預(yù)覽圖片顯示的為電腦圖片存放方向。
用iPhone手機(jī)通過home鍵朝向四個不同的方向進(jìn)行拍照后，上傳照片顯示與預(yù)覽圖片方向并不一致。有點不明白其中緣由，后來發(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手機(jī)圖片上傳顯示旋轉(zhuǎn)問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
下面小編就為大家?guī)硪黄粋€簡單的JavaScript Map實例(分享)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要為大家詳細(xì)介紹了原生js實現(xiàn)拼圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
javascript靜態(tài)頁面?zhèn)髦档娜N方法分享
這篇文章介紹了javascript靜態(tài)頁面?zhèn)髦档娜N方法及優(yōu)缺點，有需要的朋友可以參考一下2013-11-11
這篇文章主要為大家詳細(xì)介紹了JavaScript禁止微信瀏覽器下拉回彈效果的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了HTML界面登錄時的JS驗證方法,需要的朋友可以參考下2014-05-05
JavaScript 引用類型實例詳解【數(shù)組、對象、嚴(yán)格模式等】
這篇文章主要介紹了JavaScript 引用類型,結(jié)合實例形式詳細(xì)分析了JavaScript 數(shù)組、對象、嚴(yán)格模式引用類型相關(guān)概念、原理及操作注意事項,需要的朋友可以參考下2020-05-05
JSON與String互轉(zhuǎn)的實現(xiàn)方法(Javascript)
下面小編就為大家?guī)硪黄狫SON與String互轉(zhuǎn)的實現(xiàn)方法(Javascript) 。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-09-09
this是javascript的一個關(guān)鍵字，隨著函數(shù)使用場合不同，this的值會發(fā)生變化。但是總有一個原則，那就是this指的是調(diào)用函數(shù)的那個對象。接下來通過本文給大家介紹js中的this指針和引用，非常不錯，需要的朋友參考下2016-08-08
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)圖片切換特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
這篇文章主要介紹了TypeScript常見類型及應(yīng)用示例講解，本章我們會講解?JavaScript?中最常見的一些類型，以及對應(yīng)的描述方式，有需要的朋友可以借鑒參考下2022-02-02