基于微信小程序的虛擬試穿分析與研究

姚志強 李美珊 周宇翔

摘要：該文主要研究網絡上的人與衣服的圖片如何契合并搭配合理。人們在網購時只能看圖片中模特的上身效果，有的時候買了后并不適合自己，一些消費者會選擇退掉，這樣既浪費了時間又浪費了資源。微信虛擬試穿小程序可以讓用戶上傳自己的全身照以及欲購買的服飾圖片，調整服裝圖片進行“試穿”，小程序具有模擬標尺功能，模擬真實比例。手機的相機像素較高，基本細節都可以展示出來，模擬試穿效果，小程序保護用戶的隱私安全。搭配完進行保存，繼續搭配的可以同之前作品同框比較。

關鍵詞：虛擬;平面試穿;小程序;服飾;穿搭

中圖分類號：TP311? ? ? 文獻標識碼：A

文章編號：1009-3044（2021）11-0001-02

1 模擬試穿程序分析

目前的虛擬試衣以歐美虛擬技術為主，優點是自己調節模特身體細節來符合自己的身材，缺點則是成本過高，服裝需要專業人士制作三維動畫，消費者不會選擇花費高昂的價格來使用。國內采用2D體感技術和拍照App，第一類需要硬件設備，第二類則是需要在指定區域拍下頭像與模特進行融合。

利用小程序開發者工具來創建小程序，利用編輯器內的模擬器、編輯器、調試器來制作程序內容。用戶可以隨時隨地自由使用，微信虛擬試穿小程序通過用戶上傳自己的全身照，想要購買的衣服的資源，調整模擬進行“試穿”，在消費時能夠滿足消費者的視覺要求，該小程序具有模擬標尺功能，模擬真實比例。在一些殘障人士不方便試穿的人，可以使用我們的小程序方便地挑選自己喜歡的服裝，節省了很多的時間[5-6]。

2 小程序的實現研究

微信小程序開發基于wxml（微信模塊文件，類似于網頁開發的html文件構建框架）利用pages字段用于描述小程序所有頁面路徑，在wxml的模塊中，我們前端開發中對頁面布局使用divpspan標簽區組成頁面組件。通過以微信內置的解釋器將微信服務器的前端代碼和用戶數據庫后臺傳輸過來的數據進行拼接的原理來通過微信小程序，后端開發則用java或其他代碼來搭建邏輯功能，將內容提交微信官方來通過小程序。

1）小程序的步驟，第一步先創建新的代碼格式

2）第二步寫入頭文件pages（{}）

3）第三步小程序的初始界面

{

"pages"：[

"pages/index/index"，? ?//頭文件名稱

"pages/logs/logs"]，

"window"：{

"navigationStyle"："custom"，? //需要開發者自行設計定義頂欄的樣式

"backgroundTextStyle"："light"，

"navigationBarBackgroundColor"： "#fff"，

"navigationBarTitleText"： "WeChat"，

"navigationBarTextStyle"："black"? ?//自定義效果

}}

4）第四步頁面程序

hello

這個是基本的文本框，再加入拍照的衣服圖片，即本地圖片。服裝圖的編輯主要是定義一個View，在使用的時候放到需要用到的地方，大小設置和目標圖片相同大小。通過matrix對平移、旋轉、縮放的操作進行映射，最終改變貼紙圖片的繪制結果，因此實現目標功能。下面具體分析各個功能：

創建的視圖在設置完貼紙圖片之后，要創建一個浮點型數組，用于保存;

默認未進行任何變換的時候貼紙圖片的關鍵點，以及一個原始矩形用于保存一個;

默認繪制區域的矩形，變換后的點通過Matrix.mapPoints（newPoints， originPoints）進行映射變換后的矩形通過Matrix.mapRect（newRect， originRect）進行映射，可以通過這些新的點畫一些附加元素。至于貼紙圖，可以通過獲取后的rect進行定位畫，也可以直接使用canvas.draw Bitmap（bitmap， matrix， paint）方法繪制至于如何進行變換操作，如何進行變換，則是在onTouch中處理各種觸摸事件，或者在dispatchTouchEvent 平移[1]。

float imgWidth = mBitmap.getWidth（）;

float imgHeight = mBitmap. getHeight（）;

float[] originProints = new float[ ]{0，0，imgWidth，0，imgHeigth， imgHeight，0， imgHeight，imgWidth/2，imgHeight/2};

RectF mOriginRect = new RectF（0，0， imgWidth，imgHeight）;

經歷判斷ACTION_DOWN、ACTION_UP來判別觸碰能否在用戶的二維圖片上，而后計算手指滑動軌跡的長度，能夠獲取到x軸和y軸的平移長度的調用 mMatrix.postTranslate（x，y），然后重新映射繪圖來旋轉按照二維圖片的其中一個角點作旋轉觸摸點，使二維圖片的中心（非view中心），調用mMatrix.postRotate（rotation， px， py），算出旋轉度數，px、py兩點（上方映射的點，而非初始點）是二維圖片中心點。縮小一同經過觸摸點計算在滑動過程中的縮放比例，來利用Matrix.postScale（scale， scale， px， py）縮放。利用Kinect—SDK 提供的接口能夠十分輕松地獲得彩色圖像、用戶體型圖像和人體骨關節點坐標。需要利用SDK提供的映射函數換算出人體影像的全圖坐標。

2.1 圖像的一級分割

由于用戶圖片和服飾圖片采用同樣的方法進行切割，以下述圖片的分割包含了二級分割，都表示對兩圖片的分割過程。一級分割第一步是把用戶的頸部、雙肩、腰部、臂部分割。由圖片上選取的關節點坐標位置來實行全景射線探測，直到遇到匹配像素，所有方向的探測線長度記為C（l），0≤l<180，尋找過此點最短的一條分割線，記A1為所測得到的探測角度，以角度A1方向和A1+180°方向畫切割線。A1則滿足：C（A）+C（ A+180）=min{C（l）+C（l+180）}且記錄切割線兩點的坐標。然后將圖像進行一級和二級切割。

3 人體圖像分析

根據上述處理的人體圖像和服飾圖像的切割結論，擁有同樣的拓撲結構，來遍歷所相對的所有二級模塊，將身體二級模塊各部位的服裝彩色圖像來進行覆蓋粘貼，直至人體的各個試穿部位都被粘貼到服飾對應的部位。如下為針對肩部切割的二級模塊，具體操作如下。

3.1 將模塊分成兩個三角形

圖中的a、b、c、d為各個骨骼點。將abc、cbd劃分為兩個三角形。構成一個顏色矩陣Z，此矩陣的行數和列數，三角形行列數需大于最小外接矩形，這里可以將三角形最長邊的1.2倍長度作為Z的行數H、列數N。矩陣的坐標（C-1，0）（C-1，R-1）（0，0）及服飾圖片二級模塊中三角形abc的坐標代入式中：

[x'y'1=p（0）p（2）p（1）p（1）p（3）p（2）001=xy1]? ?[A=P（3）P（4）P（1）P（5）P（6）P（2）001]

求出仿射矩陣，遍歷Z中坐標P、A×P得出服裝圖片中的坐標，各部位點坐標獲得矩陣Z的服飾填充圖片。三角形cbd同上。由Z中坐標（C1，0）、（C-1，R-1）、（0，1）以及人用戶圖片的二級模塊中的abc的坐標，求出A2，遍歷Z中坐標點P2，A×P得到用戶圖片中的坐標，并以矩陣Z的各身體部位進行對應服飾填充[4]。

3.2 小程序創作流程

1）小程序的注冊：進入微信小程序官方首頁，填寫注冊相關信息并提交注冊，完成注冊后用戶需完善用戶個人信息。

2）小程序信息的完善：輸入微信小程序的基本信息，例如頭像、名稱、服務范圍等。在小程序開發前綁定要開發者的微信ID，完善管理員信息，并綁定微信用。

3）開發小程序：微信平臺給出了完備的開發框架，用戶可進入微信官網下載并安裝小程序開發者工具，用戶可以依據自己小程序需求開發、調試。

4）官方審核并發布：用戶小程序編寫完成后，需向騰訊官方提交代碼和開發配置等信息并等待審核，通過后可成功發布小程序。

微信的Web開發者工具是一種基于自己的開發者工具，它實現了同步本地文件、開發調試、編譯預覽、上傳、發布小程序等流程。微信小程序提供了多種原生App組件，并開發了自己的wxml標簽語言及wxss樣式語言。算法實現了全方位顯示試穿結果圖片，相比于3D建模虛擬試衣更加真實，利用二級分割更可以使圖片充分利用[2-3]。

4 結束語

通過上述分析和探討，基于微信小程序的虛擬試衣間能夠大大改善人們購買衣物的復雜性和不可預知性，通過虛擬試衣間就可以進行衣物搭配，同時，平臺建立在微信小程序的基礎?上大大降低了軟件的適配性以及系統的協調性，減少了大量的時間及人工成本，并且方便了用戶的使用，搜一搜即可找到虛

擬試衣間。還有一些問題待完善，比如，人物的建模目前的技術很難做到，只用照片的話還是與真實試穿有一絲差異。因此如何將衣服建立到模型上，在未來甚至建立3D環繞的虛擬試衣間，還需要繼續研究。

參考文獻：

[1] 蘇卓，喻春陽.基于2D圖像變換的虛擬試衣算法[J].計算機技術與發展，2018，28（2）：24-26 .

[2] 李健，崔棟梁.基于簡化的質點彈簧模型的布料模擬[J].計算機工程與設計，2010，31（4）：819-821.

[3] 石敏，毛天露，夏時洪，等.布料動畫方法研究進展及問題[J].計算機學報，2012，35（12）：2446-2458.

[4] 張智，曾誠.基于RIA技術的在線試衣間系統的設計[J].計算機技術與發展，2011，21（10）：143-146.

[5] Cordier F，Seo H，Magnenat-Thalmann N.Made-to-meas-ure technologies for online clothing store[J].IEEE Comput-er Graphics and Applications，2003，23（1）：38-48.

[6] 中國電子商務研究中心.虛擬試穿遠離網購退貨噩夢[EB/OL].（2011-03-30）[2012-10-20].http：//b2b.toocle.com/detail-5717577.html.

【通聯編輯：謝媛媛】