2016年4月6日 星期三

《美圖秀秀》海報是甚麼構造?

經常看到朋友把數張照片合成一張後上傳到 Facebook。很想把這個功能加入到新的影像類應用程式中,於是把女兒常用的《美圖秀秀》來一次逆向工程,看看它的海報是怎樣做。


打開《美圖秀秀》,隨意下載數張海報。利用 Charles Proxy 檢視當中的通訊,得到海報的 ZIP 檔案。檔案沒有密碼保護,直接能解壓。


那些 JPG 檔案也沒有被加密,一看便知道是不同解像度的預覽圖。其他的都不知道是甚麼,先來看看封包內的 ini.plist:

沒有太多內容。Image 是封包內預覽圖的檔名;Sucai 是普通話,即「素材」;id 很直接是編號。即是說,建立海報圖的「素材」是「10080001.hbpt-bj」這個檔啦。

用 HexEdit 打開「10080001.hbpt-bj」:

很容易看出 PNG 的檔頭。那麼前方的則是 HBPT 的檔頭了,但內容又是甚麼?要嘗試解讀,需要參考更多的 HBPT 檔頭:

這個檔頭大小一樣,當中只有少許數值不同。意味著那些位置的內容是因檔案而異。

這個檔頭較短,即是說檔頭不是固定大小。

那麼,先把 HBPT 檔頭刪去,讓它變成 PNG:

原來拼出 Sita 海報的素材是這樣!但為何中間沒有線把兩張相片,甚至三張相片分開?

是不是分隔線在其他檔案?打開來看看:

這個沒有 PNG 檔頭,不像是分隔線的圖檔。

這個不是,其他的也不是。由於素材是透明底色,意味著分隔線應該藏在 HBPT 檔案內。翻看檔頭因檔案而異的部份:

在位置 0x28 開始的四個數值:FF E1 95 C3,看來是 ARGB 內容。在 PhotoShop 輸入紅色 0xE1、綠色 0x95、藍色 0xC3,出來果然是跟邊框差不多的粉紅色。再找多個海報來試試:

同樣生效,今次是 FF FF FF FF,是純白色。看看解圖:

是白色的海報,分隔線也是白色啦。估計正確!


等等!這個不一樣。為甚麼呢?解開 PNG 來看看:

哦!底圖不是純色的!而且素材檔案內能找到兩個 PNG 檔頭!看看後面那張 PNG:

原來分開兩層的類型!既然一個檔內有兩張 PNG 圖,即是說需要有資料來告訴程式,下一張圖在檔案內的位置。

再看看檔頭 0x30 位置:

數值 C9 2C 01 00,在 Intel 的換算下是 0x00012CC9,應該是 PNG 的大小,加上 HBPT 檔頭大小 0x34 剛好是 0x00012CFD。亦即是圖中左上角的檔案大小。確認了這個是 PNG 大小的值。

好了。其他的是甚麼檔案?

依我估計,2.ptljb 是兩張相片時,每格相片的形狀資料;3.ptljb 是三張相片;4.ptljb 是四張相片,如此類推。再看看檔案大小,每加一格相片,大小增加 80 個字元,非常固定。意味著一格相片的資料為 80 字元。到目前已經了解《美圖秀秀》海報的運作,不打算再深究形狀方面的事情,就到此為止。

沒有留言: