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