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