姚志強(qiáng) 李美珊 周宇翔

摘要：該文主要研究網(wǎng)絡(luò)上的人與衣服的圖片如何契合并搭配合理。人們?cè)诰W(wǎng)購(gòu)時(shí)只能看圖片中模特的上身效果，有的時(shí)候買了后并不適合自己，一些消費(fèi)者會(huì)選擇退掉，這樣既浪費(fèi)了時(shí)間又浪費(fèi)了資源。微信虛擬試穿小程序可以讓用戶上傳自己的全身照以及欲購(gòu)買的服飾圖片，調(diào)整服裝圖片進(jìn)行“試穿”，小程序具有模擬標(biāo)尺功能，模擬真實(shí)比例。手機(jī)的相機(jī)像素較高，基本細(xì)節(jié)都可以展示出來(lái)，模擬試穿效果，小程序保護(hù)用戶的隱私安全。搭配完進(jìn)行保存，繼續(xù)搭配的可以同之前作品同框比較。

關(guān)鍵詞：虛擬;平面試穿;小程序;服飾;穿搭

中圖分類號(hào)：TP311? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2021）11-0001-02

1 模擬試穿程序分析

目前的虛擬試衣以歐美虛擬技術(shù)為主，優(yōu)點(diǎn)是自己調(diào)節(jié)模特身體細(xì)節(jié)來(lái)符合自己的身材，缺點(diǎn)則是成本過(guò)高，服裝需要專業(yè)人士制作三維動(dòng)畫，消費(fèi)者不會(huì)選擇花費(fèi)高昂的價(jià)格來(lái)使用。國(guó)內(nèi)采用2D體感技術(shù)和拍照App，第一類需要硬件設(shè)備，第二類則是需要在指定區(qū)域拍下頭像與模特進(jìn)行融合。

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

2 小程序的實(shí)現(xiàn)研究

微信小程序開(kāi)發(fā)基于wxml（微信模塊文件，類似于網(wǎng)頁(yè)開(kāi)發(fā)的html文件構(gòu)建框架）利用pages字段用于描述小程序所有頁(yè)面路徑，在wxml的模塊中，我們前端開(kāi)發(fā)中對(duì)頁(yè)面布局使用divpspan標(biāo)簽區(qū)組成頁(yè)面組件。通過(guò)以微信內(nèi)置的解釋器將微信服務(wù)器的前端代碼和用戶數(shù)據(jù)庫(kù)后臺(tái)傳輸過(guò)來(lái)的數(shù)據(jù)進(jìn)行拼接的原理來(lái)通過(guò)微信小程序，后端開(kāi)發(fā)則用java或其他代碼來(lái)搭建邏輯功能，將內(nèi)容提交微信官方來(lái)通過(guò)小程序。

1）小程序的步驟，第一步先創(chuàng)建新的代碼格式

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

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

{

"pages"：[

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

"pages/logs/logs"]，

"window"：{

"navigationStyle"："custom"，? //需要開(kāi)發(fā)者自行設(shè)計(jì)定義頂欄的樣式

"backgroundTextStyle"："light"，

"navigationBarBackgroundColor"： "#fff"，

"navigationBarTitleText"： "WeChat"，

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

}}

4）第四步頁(yè)面程序

hello

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

創(chuàng)建的視圖在設(shè)置完貼紙圖片之后，要?jiǎng)?chuàng)建一個(gè)浮點(diǎn)型數(shù)組，用于保存;

默認(rèn)未進(jìn)行任何變換的時(shí)候貼紙圖片的關(guān)鍵點(diǎn)，以及一個(gè)原始矩形用于保存一個(gè);

默認(rèn)繪制區(qū)域的矩形，變換后的點(diǎn)通過(guò)Matrix.mapPoints（newPoints， originPoints）進(jìn)行映射變換后的矩形通過(guò)Matrix.mapRect（newRect， originRect）進(jìn)行映射，可以通過(guò)這些新的點(diǎn)畫一些附加元素。至于貼紙圖，可以通過(guò)獲取后的rect進(jìn)行定位畫，也可以直接使用canvas.draw Bitmap（bitmap， matrix， paint）方法繪制至于如何進(jìn)行變換操作，如何進(jìn)行變換，則是在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）;

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

2.1 圖像的一級(jí)分割

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

3 人體圖像分析

根據(jù)上述處理的人體圖像和服飾圖像的切割結(jié)論，擁有同樣的拓?fù)浣Y(jié)構(gòu)，來(lái)遍歷所相對(duì)的所有二級(jí)模塊，將身體二級(jí)模塊各部位的服裝彩色圖像來(lái)進(jìn)行覆蓋粘貼，直至人體的各個(gè)試穿部位都被粘貼到服飾對(duì)應(yīng)的部位。如下為針對(duì)肩部切割的二級(jí)模塊，具體操作如下。

3.1 將模塊分成兩個(gè)三角形

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

[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中坐標(biāo)P、A×P得出服裝圖片中的坐標(biāo)，各部位點(diǎn)坐標(biāo)獲得矩陣Z的服飾填充圖片。三角形cbd同上。由Z中坐標(biāo)（C1，0）、（C-1，R-1）、（0，1）以及人用戶圖片的二級(jí)模塊中的abc的坐標(biāo)，求出A2，遍歷Z中坐標(biāo)點(diǎn)P2，A×P得到用戶圖片中的坐標(biāo)，并以矩陣Z的各身體部位進(jìn)行對(duì)應(yīng)服飾填充[4]。

3.2 小程序創(chuàng)作流程

1）小程序的注冊(cè)：進(jìn)入微信小程序官方首頁(yè)，填寫注冊(cè)相關(guān)信息并提交注冊(cè)，完成注冊(cè)后用戶需完善用戶個(gè)人信息。

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

3）開(kāi)發(fā)小程序：微信平臺(tái)給出了完備的開(kāi)發(fā)框架，用戶可進(jìn)入微信官網(wǎng)下載并安裝小程序開(kāi)發(fā)者工具，用戶可以依據(jù)自己小程序需求開(kāi)發(fā)、調(diào)試。

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

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

4 結(jié)束語(yǔ)

通過(guò)上述分析和探討，基于微信小程序的虛擬試衣間能夠大大改善人們購(gòu)買衣物的復(fù)雜性和不可預(yù)知性，通過(guò)虛擬試衣間就可以進(jìn)行衣物搭配，同時(shí)，平臺(tái)建立在微信小程序的基礎(chǔ)?上大大降低了軟件的適配性以及系統(tǒng)的協(xié)調(diào)性，減少了大量的時(shí)間及人工成本，并且方便了用戶的使用，搜一搜即可找到虛

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

參考文獻(xiàn)：

[1] 蘇卓，喻春陽(yáng).基于2D圖像變換的虛擬試衣算法[J].計(jì)算機(jī)技術(shù)與發(fā)展，2018，28（2）：24-26 .

[2] 李健，崔棟梁.基于簡(jiǎn)化的質(zhì)點(diǎn)彈簧模型的布料模擬[J].計(jì)算機(jī)工程與設(shè)計(jì)，2010，31（4）：819-821.

[3] 石敏，毛天露，夏時(shí)洪，等.布料動(dòng)畫方法研究進(jìn)展及問(wèn)題[J].計(jì)算機(jī)學(xué)報(bào)，2012，35（12）：2446-2458.

[4] 張智，曾誠(chéng).基于RIA技術(shù)的在線試衣間系統(tǒng)的設(shè)計(jì)[J].計(jì)算機(jī)技術(shù)與發(fā)展，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] 中國(guó)電子商務(wù)研究中心.虛擬試穿遠(yuǎn)離網(wǎng)購(gòu)?fù)素涁瑝?mèng)[EB/OL].（2011-03-30）[2012-10-20].http：//b2b.toocle.com/detail-5717577.html.

【通聯(lián)編輯：謝媛媛】