資訊專(zhuān)欄INFORMATION COLUMN
摘要：后續(xù)過(guò)了幾天，公司購(gòu)置了幾臺(tái)全新的測(cè)試機(jī)，測(cè)試同學(xué)將系統(tǒng)在一臺(tái)三星的機(jī)子上一測(cè)，又發(fā)現(xiàn)新問(wèn)題了選擇完圖片進(jìn)行本地預(yù)覽時(shí)，發(fā)現(xiàn)圖片翻轉(zhuǎn)了但上傳后再展示又是正常的。
問(wèn)題描述最近在處理移動(dòng)端選擇圖片實(shí)時(shí)預(yù)覽并上傳時(shí)遇到一個(gè)問(wèn)題：上傳前圖片預(yù)覽正常，但上傳到服務(wù)器上的圖片展示到頁(yè)面上時(shí)，有時(shí)會(huì)出現(xiàn)圖片翻轉(zhuǎn)的問(wèn)題，一般是翻轉(zhuǎn) 90 度。后經(jīng)一翻研究找到了問(wèn)題所在，特在此記錄一下。
接上面提到的問(wèn)題，經(jīng)過(guò)一些測(cè)試，發(fā)現(xiàn)：如果選取的圖片是在橫屏狀態(tài)下拍攝的，則上傳后不會(huì)出現(xiàn)圖片翻轉(zhuǎn)的問(wèn)題；反之，如果是在豎屏狀態(tài)下拍攝的，上傳后就會(huì)出現(xiàn)圖片翻轉(zhuǎn)的問(wèn)題。
問(wèn)題分析首先，圖片在本地預(yù)覽時(shí)正常，而且前端最后提交到后端的數(shù)據(jù)是用 FormData 來(lái)封裝處理的，用 FormData 可以保證提交的數(shù)據(jù)和通常的表單提交沒(méi)有什么區(qū)別，對(duì)后端來(lái)說(shuō)是透明的，后端的處理邏輯不用修改就可以處理帶文件的 Ajax 提交。因此，我猜想問(wèn)題可能出在了后端。
但是后端也沒(méi)有做什么特殊的處理，怎么展示的時(shí)候圖片就翻轉(zhuǎn)了呢？
OK，前面提到過(guò)這個(gè)問(wèn)題和手機(jī)的拍照模式有關(guān)，豎屏下拍的照片會(huì)重現(xiàn)這個(gè)問(wèn)題，橫屏下的則不會(huì)。難道這兩種模式下拍攝的照片不一樣？照片中保存的數(shù)據(jù)不一樣？，這不由的使我想到了 [Exif][] 這個(gè)名詞，雖然我對(duì)它不是十分了解，但是印象中它是用來(lái)保存照片的一些元數(shù)據(jù)信息的，也許和它有關(guān)。
簡(jiǎn)單的一搜索發(fā)現(xiàn)：Exif[orientation]有一篇關(guān)于它的詳細(xì)的介紹，此處不展開(kāi)細(xì)講。簡(jiǎn)單來(lái)說(shuō)就是它有 8 個(gè)值，用來(lái)表示照片拍攝時(shí)相機(jī)旋轉(zhuǎn)的狀態(tài)，而且我們可以通過(guò)編程的方式讀取它。我們平常用電腦來(lái)查看手機(jī)拍攝的照片時(shí)也會(huì)偶爾出現(xiàn)圖片翻轉(zhuǎn)的情況，其原因也是照片查看軟件沒(méi)有根據(jù)這個(gè)值將照片自動(dòng)翻轉(zhuǎn)。
經(jīng)過(guò)搜索，在 SO 上找到了相關(guān)的問(wèn)題。其思路就是讀取照片的 Exif 信息，判斷 Orientation 的值，然后將圖片進(jìn)行相應(yīng)的旋轉(zhuǎn)。問(wèn)題已確定，后端同學(xué)很快就將這個(gè)問(wèn)題給修復(fù)了，并且添加到了他們的公共模塊中。
你以為問(wèn)題就這樣解決了，其時(shí)并沒(méi)有。
后續(xù)過(guò)了幾天，公司購(gòu)置了幾臺(tái)全新的測(cè)試機(jī)，測(cè)試同學(xué)將系統(tǒng)在一臺(tái)三星的機(jī)子上一測(cè)，又發(fā)現(xiàn)新問(wèn)題了：選擇完圖片進(jìn)行本地預(yù)覽時(shí)，發(fā)現(xiàn)圖片翻轉(zhuǎn)了！但上傳后再展示又是正常的。WTF！
這次沒(méi)得說(shuō)了，問(wèn)題肯定出在了前端預(yù)覽上。但是之前在安卓和 iOS 的設(shè)備上測(cè)試都是正常的呀，難道和機(jī)型有關(guān)？問(wèn)了一下測(cè)試，得知這臺(tái)三星用的是 Android 5.0 的系統(tǒng)，好先進(jìn)有木有！這難道是 5.0 中引入的一個(gè)問(wèn)題？別想這些了，反正我們也不可能在系統(tǒng)層面去修復(fù)這個(gè)問(wèn)題，還是想想如何去兼容 5.0 吧。
當(dāng)時(shí)想到了兩種方法，一種是選擇圖片后先上傳到服務(wù)器，再展示上傳的圖片進(jìn)行預(yù)覽。這種方法的優(yōu)點(diǎn)是兼容性好，前端處理相對(duì)簡(jiǎn)單；缺點(diǎn)是后端要提供圖片上傳的接口，并且如果用戶(hù)在保存之前更換圖片并不會(huì)刪除之前上傳的圖片。移動(dòng)端的微博配圖就是用的這種方法。
另一種方法是在本地進(jìn)行圖片翻轉(zhuǎn)。我們可以使用 FileReader API 來(lái)讀取圖片，之后像后端那樣分析 Exif 信息，旋轉(zhuǎn)圖片。這種做法的優(yōu)點(diǎn)是，預(yù)覽操作完全在本地完成，不會(huì)產(chǎn)生不必要的文件上傳。缺點(diǎn)是 FileReader 在 Android 4.1 及以上的機(jī)型才可以使用，加上前端處理文件數(shù)據(jù)可能稍顯復(fù)雜，另外性能也是個(gè)問(wèn)題。
但是最終我們選擇了第二種方案。原因是我們之前的照片預(yù)覽就是用的 FileReader API，不需要考慮低版本安卓的兼容性，這和項(xiàng)目的實(shí)際情況有關(guān)。另一個(gè)原因是我們認(rèn)為也許有前人已經(jīng)遇到過(guò)這種問(wèn)題，也許已經(jīng)有了比較好的處理這個(gè)問(wèn)題的功能模塊。后經(jīng)搜索，找到了一個(gè) fix-orientation 模塊，可以通過(guò) npm i fix-orientation --save 使用，具體的用法可以參考項(xiàng)目的文檔。后來(lái)，掃了一眼它的代碼，發(fā)現(xiàn)它是用 canvas 來(lái)實(shí)現(xiàn)圖片的旋轉(zhuǎn)，并不會(huì)對(duì)正常的圖片進(jìn)操作，性能問(wèn)題不大，iOS 上秒開(kāi)，安卓設(shè)備上稍長(zhǎng)，可以添加 loading 效果緩解一下。
至此，問(wèn)題完美解決。
另外，像 fix-orientation 這樣小而美的模塊有很多，大家平時(shí)可以多關(guān)注一下。
原文鏈接：http://happycoder.net/fix-image-upload-rotation/
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/78353.html
前言 記得16年的時(shí)候我初入前端差不多一年，公司做了一個(gè)webapp，有上傳頭像功能，當(dāng)時(shí)這個(gè)項(xiàng)目不是我在負(fù)責(zé)，測(cè)試的時(shí)候發(fā)現(xiàn)蘋(píng)果用戶(hù)拍照上傳頭像會(huì)翻轉(zhuǎn)，當(dāng)時(shí)幾個(gè)前端的同學(xué)捯飭了一下午也沒(méi)解決，結(jié)果問(wèn)題轉(zhuǎn)到我這里，還有半個(gè)小時(shí)下班；當(dāng)時(shí)也是一臉懵逼，首先想到的是，這怎么判斷它是否翻轉(zhuǎn)了呢？安卓沒(méi)問(wèn)題啊，有些蘋(píng)果手機(jī)相冊(cè)里面的圖片也沒(méi)問(wèn)題啊，js能有這種功能判斷嗎？上網(wǎng)查資料，果不其然，有！那就是e...
摘要：前陣子七夕的時(shí)候搞了一個(gè)活動(dòng)頁(yè)，需要做一個(gè)本地圖片的裁剪上傳功能，用于生成一些特定的表白圖片。還有就是是配合實(shí)現(xiàn)的，因?yàn)槲沂侵苯釉陧?xiàng)目中復(fù)制過(guò)來(lái)改改的，就懶得轉(zhuǎn)換了圖片讀取要裁剪首先肯定就是讀取圖片文件。 前陣子七夕的時(shí)候搞了一個(gè)h5活動(dòng)頁(yè)，需要做一個(gè)本地圖片的裁剪上傳功能，用于生成一些特定的表白圖片。主要是用到了H5的FileApi 和 Canvas。個(gè)人感覺(jué)圖片裁剪功能還是很實(shí)用的...
摘要：在裁剪框外拖動(dòng)鼠標(biāo)會(huì)生成一個(gè)新的裁剪框。這個(gè)是裁剪框的縱橫比，默認(rèn)是不限制的。初始化完成后是否自動(dòng)顯示裁剪框自動(dòng)顯示的裁剪框的大小。方法的使用格式為手動(dòng)顯示裁剪框。 插件介紹 這是一個(gè)我在寫(xiě)以前的項(xiàng)目的途中發(fā)現(xiàn)的一個(gè)國(guó)人寫(xiě)的jQuery圖像裁剪插件，當(dāng)時(shí)想實(shí)現(xiàn)用戶(hù)資料的頭像上傳功能，并且能夠預(yù)覽圖片，和對(duì)圖片進(jìn)行簡(jiǎn)單的裁剪、旋轉(zhuǎn)，花了不少時(shí)間才看到了這個(gè)插件，感覺(jué)功能挺全面，代碼實(shí)現(xiàn)起...
閱讀 964·2021-11-24 10:42
閱讀 3475·2021-11-19 11:34
閱讀 2605·2021-09-29 09:35
閱讀 2525·2021-09-09 09:33
閱讀 641·2021-07-26 23:38
閱讀 2515·2019-08-30 10:48
閱讀 1385·2019-08-28 18:07
閱讀 422·2019-08-26 13:44
