周末一早兒，天氣甚好。若不與大自然來個(gè)自拍，倒辜負(fù)了此番好天氣。

饅頭Mant.君隨手打開一款極其小眾的圖片社交app，上傳了剛剛的自拍照。

“l(fā)oading…loading…100%了！”

誒，怎么上傳的照片方向不對(duì)，倒轉(zhuǎn)了90度！

咋回事兒？上傳的自拍怎么還倒轉(zhuǎn)了…

首先，說一下什么叫圖片倒轉(zhuǎn)？見下圖。

其實(shí)在前言就提到，圖片的倒轉(zhuǎn)現(xiàn)象是指圖片的方向發(fā)生了變化。比如上圖就是豎向式照片在上傳后橫置了。

那為什么會(huì)出現(xiàn)圖片倒轉(zhuǎn)？其實(shí)，對(duì)于一款app來說，圖片倒轉(zhuǎn)出現(xiàn)的概率極低。如果app本身采取了一定的“手段”（后面會(huì)詳細(xì)介紹），那么就根本不會(huì)出現(xiàn)圖片倒轉(zhuǎn)的問題。如果在app沒有采取任何措施的情況下，那只有當(dāng)上傳的圖片文件過大等才會(huì)出現(xiàn)這種問題。

但是，當(dāng)出現(xiàn)圖片倒轉(zhuǎn)的問題時(shí)應(yīng)該怎么解決？

各位少俠會(huì)yy，在上傳圖片前提前調(diào)整圖片方向，將其按照app倒轉(zhuǎn)方向前置逆向倒轉(zhuǎn)掉，這樣再去上傳圖片，圖片方向就正常了。

不過，這種辦法饅頭Mant.君親自嘗試過，答案是“No Way” 。在我測(cè)試后發(fā)現(xiàn)，有些情況下對(duì)圖片的提前逆轉(zhuǎn)，會(huì)導(dǎo)致上傳時(shí)不會(huì)發(fā)生圖片倒轉(zhuǎn)的現(xiàn)象。那相當(dāng)于最后上傳的圖片還是倒轉(zhuǎn)的，只不過這種倒轉(zhuǎn)是屬于人為造成的。

但是，即便這種方法是有效且屢試不爽的，可還是給用戶體驗(yàn)上帶來了糟糕的感受，因?yàn)樵诋a(chǎn)品的易用性方面極大程度上給用戶帶來了困擾和挫敗感。

今天我們就從產(chǎn)品層思考下，如何去解決圖片倒轉(zhuǎn)的問題。

方案一 ： 事后防控

什么叫事后防控？就是說在問題發(fā)生后，給到用戶一個(gè)工具或方法去改善它，來防控這樣的問題較大概率地出現(xiàn)。

如果我們?cè)诋a(chǎn)品上可預(yù)見會(huì)發(fā)生圖片倒轉(zhuǎn)的問題，是需要給到用戶一個(gè)補(bǔ)償措施的。就是說既然上傳的圖片在方向上可能會(huì)出現(xiàn)問題，我們可以設(shè)計(jì)出一個(gè)交互組件，來幫助用戶對(duì)尚未正式上傳前的預(yù)覽圖片進(jìn)行方向調(diào)整然后再上傳。

其實(shí)，這是一個(gè)完全站在用戶角度設(shè)計(jì)的產(chǎn)品，調(diào)整或不調(diào)整由用戶來主導(dǎo)。但對(duì)于商業(yè)產(chǎn)品卻不一定適合，為什么？比如今天饅頭我是京東pop商家，打算在京東發(fā)布商品，需要上傳一些商品圖片送審后上架展示。這里的“送審”和“上架展示”是兩個(gè)環(huán)節(jié)，我在上傳圖片時(shí)沒有注意到圖片倒轉(zhuǎn)，接下來會(huì)發(fā)生什么？審核人員會(huì)看到倒轉(zhuǎn)的圖片，一旦審核標(biāo)準(zhǔn)放寬（即僅僅審核圖片內(nèi)容是否含有不健康信息），就會(huì)導(dǎo)致商品上架后京東買家看到的商品櫥窗位的圖片都是倒轉(zhuǎn)的。無論如何，從業(yè)務(wù)上（買家、賣家、平臺(tái)）都是不希望或者不允許這樣的問題出現(xiàn)的。

但這就是這種產(chǎn)品設(shè)計(jì)的弊端，不能100%去攔截圖片倒轉(zhuǎn)的問題，絕大程度上取決于用戶的意愿。比如這是一個(gè)社交app，少俠你自拍的顏圖在上傳時(shí)出現(xiàn)倒轉(zhuǎn)，很有可能是會(huì)選擇調(diào)整方向的。但假如12306需要上傳身份證拍照信息，如果沒有強(qiáng)限制方向，少俠你還會(huì)費(fèi)盡周折地調(diào)整圖片方向再上傳么？

那還有沒有更好的方案了？有，就是作事前預(yù)處理，也是目前絕大多數(shù)app會(huì)采取的一種手段來防止圖片倒轉(zhuǎn)的問題。

方案二 ：事前預(yù)處理

就是說在圖片上傳時(shí)讓前端來識(shí)別圖片的方向，從而將圖片準(zhǔn)確無誤地顯示出來。

但是系統(tǒng)又不是人，怎么可能知道傳過來的圖片的正確方向。即便是人，也有時(shí)難以分出圖片方向。不過，系統(tǒng)還真的是可以知道圖片的正確方向的。怎么做到的？實(shí)際上，我們用手機(jī)或其他數(shù)碼設(shè)備拍照時(shí)，會(huì)把一系列的屬性信息附加在圖片文件，這些屬性構(gòu)成了大家常說的Exif信息。Exif信息中就有一個(gè)Orientation屬性字段，屬性值其實(shí)就是存放圖片的方向信息。那這樣就好辦了，讓前端引入Exif庫，讀取圖片的旋轉(zhuǎn)信息，放在圖片上傳的字段里，服務(wù)端識(shí)別旋轉(zhuǎn)信息對(duì)圖片作一個(gè)反向旋轉(zhuǎn)處理。這樣，圖片倒轉(zhuǎn)的問題迎刃而解。

不過，饅頭在這里還是要提醒一句，并不是所有圖片都有旋轉(zhuǎn)信息的，這還是要取決于拍照的數(shù)碼設(shè)備是否擁有方向傳感器。否則，上述討論的方案將一切于事無補(bǔ)。

以上就是這篇文章的全部內(nèi)容了。我是饅頭Mant.君，一名90后互聯(lián)網(wǎng)產(chǎn)品經(jīng)理。

哦對(duì)了，

我所說的，都是錯(cuò)的。

作者：饅頭（微信公眾號(hào)PRODUCTER），阿里巴巴產(chǎn)品經(jīng)理

本文由 @饅頭 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。