如何解決上傳圖片倒轉的問題?

2 評論 32236 瀏覽 27 收藏 7 分鐘

周末一早兒,天氣甚好。若不與大自然來個自拍,倒辜負了此番好天氣。

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

“loading…loading…100%了!”

誒,怎么上傳的照片方向不對,倒轉了90度!

咋回事兒?上傳的自拍怎么還倒轉了…

1024

首先,說一下什么叫圖片倒轉?見下圖。

圖片倒轉

其實在前言就提到,圖片的倒轉現象是指圖片的方向發生了變化。比如上圖就是豎向式照片在上傳后橫置了。

那為什么會出現圖片倒轉?其實,對于一款app來說,圖片倒轉出現的概率極低。如果app本身采取了一定的“手段”(后面會詳細介紹),那么就根本不會出現圖片倒轉的問題。如果在app沒有采取任何措施的情況下,那只有當上傳的圖片文件過大等才會出現這種問題。

但是,當出現圖片倒轉的問題時應該怎么解決?

各位少俠會yy,在上傳圖片前提前調整圖片方向,將其按照app倒轉方向前置逆向倒轉掉,這樣再去上傳圖片,圖片方向就正常了。

前置逆轉

不過,這種辦法饅頭Mant.君親自嘗試過,答案是“No Way” 。在我測試后發現,有些情況下對圖片的提前逆轉,會導致上傳時不會發生圖片倒轉的現象。那相當于最后上傳的圖片還是倒轉的,只不過這種倒轉是屬于人為造成的。

但是,即便這種方法是有效且屢試不爽的,可還是給用戶體驗上帶來了糟糕的感受,因為在產品的易用性方面極大程度上給用戶帶來了困擾和挫敗感。

今天我們就從產品層思考下,如何去解決圖片倒轉的問題。

方案一 : 事后防控

什么叫事后防控?就是說在問題發生后,給到用戶一個工具或方法去改善它,來防控這樣的問題較大概率地出現。

如果我們在產品上可預見會發生圖片倒轉的問題,是需要給到用戶一個補償措施的。就是說既然上傳的圖片在方向上可能會出現問題,我們可以設計出一個交互組件,來幫助用戶對尚未正式上傳前的預覽圖片進行方向調整然后再上傳。

預覽模式編輯

其實,這是一個完全站在用戶角度設計的產品,調整或不調整由用戶來主導。但對于商業產品卻不一定適合,為什么?比如今天饅頭我是京東pop商家,打算在京東發布商品,需要上傳一些商品圖片送審后上架展示。這里的“送審”和“上架展示”是兩個環節,我在上傳圖片時沒有注意到圖片倒轉,接下來會發生什么?審核人員會看到倒轉的圖片,一旦審核標準放寬(即僅僅審核圖片內容是否含有不健康信息),就會導致商品上架后京東買家看到的商品櫥窗位的圖片都是倒轉的。無論如何,從業務上(買家、賣家、平臺)都是不希望或者不允許這樣的問題出現的。

但這就是這種產品設計的弊端,不能100%去攔截圖片倒轉的問題,絕大程度上取決于用戶的意愿。比如這是一個社交app,少俠你自拍的顏圖在上傳時出現倒轉,很有可能是會選擇調整方向的。但假如12306需要上傳身份證拍照信息,如果沒有強限制方向,少俠你還會費盡周折地調整圖片方向再上傳么?

那還有沒有更好的方案了?有,就是作事前預處理,也是目前絕大多數app會采取的一種手段來防止圖片倒轉的問題。

方案二 :事前預處理

就是說在圖片上傳時讓前端來識別圖片的方向,從而將圖片準確無誤地顯示出來。

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

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

以上就是這篇文章的全部內容了。我是饅頭Mant.君,一名90后互聯網產品經理。

哦對了,

我所說的,都是錯的。

 

作者:饅頭(微信公眾號PRODUCTER),阿里巴巴產品經理

本文由 @饅頭 原創發布于人人都是產品經理?,未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 呵呵

    來自廣東 回復
  2. 一個產品經理告訴開發人員引入XX庫,這不是公雞下蛋么?
    你真的和開發溝通過?要么你們的開發有更好的技術手段解決這個問題,要么有更好的開發。

    來自北京 回復