劉志榮

摘? 要： 網(wǎng)上購(gòu)衣越來(lái)越受到廣大用戶的喜歡，但用戶如何能在網(wǎng)上買到適合自己的衣服是網(wǎng)上購(gòu)衣的最大問(wèn)題。如果用戶在購(gòu)衣之前可以在網(wǎng)絡(luò)上虛擬試衣，即將用戶挑選的衣服“穿”在不同的模特上，則會(huì)大大增加用戶的購(gòu)衣興趣，用戶的購(gòu)買欲也會(huì)隨之增大。設(shè)計(jì)采用了ImageMagick技術(shù)來(lái)實(shí)現(xiàn)這一網(wǎng)絡(luò)虛擬試衣功能。使用ImageMagick的遮罩技術(shù)，在Ruby On Rails開(kāi)發(fā)平臺(tái)中實(shí)現(xiàn)了網(wǎng)上在線試衣功能，在處理好的模特上生成二維試衣圖像。測(cè)試表明，試衣圖像的視覺(jué)效果良好。

關(guān)鍵詞： ImageMagick; 虛擬試衣; 遮罩; Ruby On Rails

中圖分類號(hào)：TP317.49? ? ? ? ? 文獻(xiàn)標(biāo)志碼：A? ? ?文章編號(hào)：1006-8228（2019）02-23-03

Design of network virtual fitting room based on ImageMagick technology

Liu Zhirong

（Hubei University of Technology， Wuhan， Hubei 430064， China）

Abstract： Buying clothes online is increasingly become the majority of the user's choice， but how users on the Internet can buy their own clothes is the biggest problem of buying clothes online.? If users can try on virtual clothes on the network before buying clothes， that is to say， the clothes they chosen will be "worn" on different models， which will greatly increase the user's interest in buying clothes， and the users' desire to buy clothes will also increase. This design uses ImageMagick technology to realize the virtual fitting function. The mask technology of ImageMagick is used， and the online fitting function is realized on Ruby On Rails environment， which generates a two-dimensional fitting image on a processed model. The test results show that the visual effect of the fitting image is good.

Key words： ImageMagick; network virtual fitting; mask; Ruby On Rails

0 引言

服裝作為非標(biāo)準(zhǔn)化商品，顧客必須知道衣服的尺碼、顏色、款式等這些要素才能做出合適的選擇。但是網(wǎng)購(gòu)環(huán)境下，除衣服顏色比較直觀外，其他幾個(gè)要素很難被直觀的了解到。網(wǎng)絡(luò)購(gòu)買服裝始終面臨著“無(wú)法試穿，退貨率高”的問(wèn)題。調(diào)查結(jié)果顯示，服裝類產(chǎn)品的網(wǎng)購(gòu)用戶普遍都會(huì)遇到號(hào)碼、色差和款式風(fēng)格不合適等問(wèn)題。網(wǎng)購(gòu)?fù)对V量上升，顧客與商家之間常出現(xiàn)糾紛。出現(xiàn)了許多淘寶上的店家被顧客給了差評(píng)之后不斷騷擾威脅顧客的不良事件。因此研發(fā)出解決此類問(wèn)題的技術(shù)顯得愈來(lái)愈重要，“網(wǎng)絡(luò)虛擬試衣間”是應(yīng)對(duì)此類問(wèn)題的有效手段之一。

近幾年前，關(guān)于試衣系統(tǒng)多有報(bào)道，例如德國(guó)弗勞恩霍夫?qū)W會(huì)的科學(xué)家開(kāi)發(fā)出一套叫做“網(wǎng)絡(luò)試衣間”的系統(tǒng)。在中國(guó)，2002年4月15日，騰訊公司推出了QQ秀。QQ秀可在固定模特身上搭配各種不同的衣服，頗滿足了部分愛(ài)美年輕女性的搭配欲。隨著QQ秀的流行，以其為代表的Avatar系統(tǒng)隨之流行，2010年10月在美國(guó)成功上市的麥考林網(wǎng)等成功的開(kāi)發(fā)出了這種網(wǎng)絡(luò)試衣系統(tǒng)。不足之處是，這種系統(tǒng)只能在固定模特上穿衣。2007年前后，以face72、試衣網(wǎng)等為代表的試衣網(wǎng)站開(kāi)始出現(xiàn)。但是，這些網(wǎng)站的認(rèn)知度和接受度并沒(méi)有想象中高。目前，市面流行的三維試衣系統(tǒng)有國(guó)外的mvm、Cme等，以及國(guó)內(nèi)的C2pop和試衣網(wǎng)自主研發(fā)的三維試衣軟件。

本設(shè)計(jì)采用了ImageMagick圖形處理技術(shù)來(lái)實(shí)現(xiàn)網(wǎng)絡(luò)試衣功能。該技術(shù)實(shí)現(xiàn)比較方便，能很好的結(jié)合Ruby On Rails開(kāi)發(fā)平臺(tái)來(lái)實(shí)現(xiàn)二維試衣效果。

1 ImageMagick簡(jiǎn)介

1.1 ImageMagick簡(jiǎn)介

ImageMagick包含有一套功能強(qiáng)大、穩(wěn)定而且免費(fèi)的圖片處理軟件工具集和開(kāi)發(fā)包，可以用來(lái)處理超過(guò)90種的圖片文件，包括流行的TIFF、JPEG、GIF、 PNG、PDF以及PhotoCD等格式的圖片文件。利用ImageMagick，可以根據(jù)Web應(yīng)用程序的需要?jiǎng)討B(tài)地生成圖片， 還可以對(duì)圖片做改變大小、旋轉(zhuǎn)、銳化、減色或增加特效等操作，并將操作的結(jié)果以相同格式或其他格式保存。對(duì)圖片的操作，既可以用命令行，也可以用C/C++、Perl、Java、PHP、Python或Ruby編程來(lái)完成。ImageMagick提供了一個(gè)高質(zhì)量的2D工具包，部分支持SVG。ImageMagic技術(shù)主要聚焦在性能、減少bug以及提供穩(wěn)定的API和ABI上。同時(shí)ImageMagick是免費(fèi)軟件：全部源碼開(kāi)放，可以自由地使用，復(fù)制，修改，發(fā)布，并支持大多數(shù)的操作系統(tǒng)[6]。

1.2 ImageMagick的功能特點(diǎn)

ImageMagick的主要功能有：①將圖片從一種格式轉(zhuǎn)換到另一種格式，包括直接轉(zhuǎn)換成圖標(biāo);②動(dòng)態(tài)改變圖片的尺寸、旋轉(zhuǎn)、銳化（sharpen）、減色等特效操作;③將不同的縮略圖進(jìn)行合成，合并成一張圖片;④將一組圖片作成gif動(dòng)畫(huà);⑤在一幅圖片上打上水印或畫(huà)其他圖形，并可以帶文字陰影和邊框渲染;⑥給圖片加邊框或框架，增加圖片的美感;⑦取得一些圖片的特性信息，例如圖片的長(zhǎng)度、寬度、大小、修改時(shí)間等屬性;⑧包括了gimp可以做到的常規(guī)插件功能，還包括了各種曲線參數(shù)的渲染功能。

ImageMagick幾乎可以在任何非專有的操作系統(tǒng)上編譯，無(wú)論是32位還是64位的CPU，包括LINUX、Windows、Macintosh、VMS、OS/2等主流操作系統(tǒng)。

2 ImageMagick的技術(shù)原理

2.1 Alpha[4]通道遮罩[5]的含義

alpha合成是將圖像與背景相結(jié)合的過(guò)程，以產(chǎn)生部分或完全透明的外觀。它通常是用于渲染圖像元素，將所得的多個(gè)2D圖像合成一個(gè)單一的圖像。為了正確地組合這些圖像元素，需要為每個(gè)元素保持相關(guān)的光照。在一個(gè)2D圖像元素中，存儲(chǔ)了每個(gè)像素的顏色，額外的數(shù)據(jù)存儲(chǔ)在一個(gè)0～1之間的值的alpha通道。如果值為0，意味著像素沒(méi)有任何覆蓋信息，是透明的，即沒(méi)有從任何幾何形狀的顏色貢獻(xiàn)。如果值為1，意味著像素是不透明的，因?yàn)閹缀涡螤钔耆丿B的像素。

如果一個(gè)Alpha通道在圖像中使用，常見(jiàn)的用法有兩種：直Alpha通道和相關(guān)Alpha通道。在直alpha通道中，RGB代表對(duì)象或像素的顏色，則不考慮其不透明度。在相關(guān)alpha通道中，RGB分量代表像素的對(duì)象的顏色，用乘法調(diào)整其不透明度。使用直alpha通道明顯的優(yōu)點(diǎn)是，在某些情況下它可以保存一個(gè)乘法的結(jié)果。然而，使用相關(guān)alpha通道最顯著的優(yōu)點(diǎn)是合成顏色的正確性和簡(jiǎn)單性，即alpha允許正確進(jìn)行過(guò)濾和混合。兩幅圖像的層疊關(guān)系有以下五種類型，分別是“over”、“in”、“out”、“atop”、“xor”，按透明度分別進(jìn)行層疊的效果如圖1所示。

2.2 Alpha通道遮罩的工作原理

alpha通道的存在，可以使用合成代數(shù)來(lái)表示合成圖像操作。例如，給定兩個(gè)圖像元素A和B，最常見(jiàn)的合成操作是結(jié)合圖像，例如圖像A出現(xiàn)在前面，圖像B出現(xiàn)在后面。這可以表示為A OVER B，還有諸如A IN B、A OUT B、A ATOP B、A XOR B等關(guān)系，如圖1所示。實(shí)際上，OVER操作符是正常的繪畫(huà)操作，而IN運(yùn)算符是alpha合成等效剪輯。作為一個(gè)例子，可以通過(guò)下面的公式來(lái)實(shí)現(xiàn)每個(gè)像素值的OVER運(yùn)算符。

其中C0是操作結(jié)果，Ca是顏色的像素單元，Cb是在B元素的像素的顏色，αa和αb分別是圖像元素A和圖像元素B的像素值，假定所有的顏色值被組合為alpha值，可以改寫(xiě)為輸出顏色的方程C0=Ca+Cb（1-aa），由此產(chǎn)生的alpha通道值為

3 基于ROR[3]環(huán)境的虛擬試衣功能的實(shí)現(xiàn)

該網(wǎng)絡(luò)虛擬試衣間在Ruby On Rails開(kāi)發(fā)環(huán)境中實(shí)現(xiàn)了網(wǎng)上試衣功能。系統(tǒng)的設(shè)計(jì)思想是采用遮罩原理，將不同的衣服、花型等不同的圖案在已選擇好的模特上顯示，用戶則可以根據(jù)顯示的不同效果作出購(gòu)衣選擇。功能的具體實(shí)現(xiàn)過(guò)程如下。

3.1 精選不同風(fēng)格的試衣模特

首先挑選一些適當(dāng)?shù)哪Ｌ?，在線試衣功能就是在這些模特上進(jìn)行的。這些模特的分辨率必須要夠高，至少是1000*1000分辨率，分辨率如果太低則會(huì)影響模特的試衣效果。其次就是模特必須是白色或接近白色，只有這樣才能制作出遮罩效果。

3.2 處理試衣模特

試衣效果的關(guān)鍵就是處理以上選擇的各類模特，將模特的不同部位用專業(yè)圖形處理軟件（例如photoshop等）進(jìn)行分割，到最后再通過(guò)程序進(jìn)行定位并合并。在此過(guò)程中，由于衣服是由不同部分“拼”起來(lái)的，所以不能簡(jiǎn)單的將模特處理為一個(gè)整塊，否則衣服“穿”在模特身上就沒(méi)有立體感，試衣將沒(méi)有效果。模特不同的部位可以采用魔術(shù)棒工具進(jìn)行分割，在分割時(shí)必須將模特放大，這樣在分割時(shí)就不容易錯(cuò)位。但是整個(gè)模特也不能分割得太碎，否則在定位合并時(shí)不容易精準(zhǔn)對(duì)齊。如果碰到有陰影的部位，為了增強(qiáng)試衣時(shí)的三維效果，在切割時(shí)須要繞過(guò)陰影部分，這樣在圖形遮罩時(shí)會(huì)保留陰影部分不變。另外將模特切割的每一部分的底色都要置換成黑色，這是遮罩技術(shù)所必須的步驟。

3.3 在線試衣的實(shí)現(xiàn)過(guò)程

⑴ 模特定位

即將上述步驟切割出的不同模特部分利用程序進(jìn)行精準(zhǔn)定位，最終還原出模特原型。在定位的同時(shí)，就是將模特的不同部位進(jìn)行合并，在ROR環(huán)境中可以利用如下程序語(yǔ)句進(jìn)行定位：system “convert mote1.jpg yi1.jpg -compose multiply-geometry+100+200 -composite tu1.jpg”。其中“mote1.jpg”為切割出的模特部分，yi1.jpg為衣服或花型的jpg圖，參數(shù)“compose”為不同的圖形進(jìn)行組合，參數(shù)“multiply”為兩幅圖形進(jìn)行相乘，參數(shù)“geometry”為坐標(biāo)參數(shù)，參數(shù)“composite”為最終合成圖形。上述的轉(zhuǎn)換過(guò)程可以用圖2進(jìn)行模擬。模特定位的作用就是要確定每個(gè)模特部分的精確位置，為下一步的模特“穿衣”做好準(zhǔn)備。

⑵ 模特“穿衣”

通過(guò)模特定位可以得出模特的每個(gè)部分精準(zhǔn)的位置坐標(biāo)。再由程序?qū)⒛Ｌ氐拿恳徊糠诌M(jìn)行遮罩操作，為它們分別“穿衣”。最終將這些“穿”好衣服的不同模特部分拼裝在一起，就構(gòu)成了一幅完整的模特服裝。在操作上，用戶只要點(diǎn)擊不同的衣服或花型的圖形，則相應(yīng)的模特便會(huì)“穿”上這些衣服，以供用戶選擇。

⑶ 操作過(guò)程中的關(guān)鍵點(diǎn)

在上述的操作過(guò)程中，為了很好的實(shí)現(xiàn)在線試衣功能，必須注意以下幾個(gè)關(guān)鍵點(diǎn)。第一，模特的選擇。模特的分辨率要高，三維立體感要強(qiáng)。第二，切割模特時(shí)需要很好的處理模特的陰影部分，使其在試衣過(guò)程中具備立體感。第三，事先要確定切割的塊數(shù)。對(duì)于一個(gè)比較復(fù)雜的模特既不能切割的太少，太少則不能顯示出模特穿衣的立體感，又不能切割的太多，太多則定位合并會(huì)比較復(fù)雜，不好精準(zhǔn)定位，因?yàn)橐獙?duì)模特的每一部分都進(jìn)行遮罩操作，所以模特“穿衣”過(guò)程就會(huì)比較緩慢。至于模特要切割為幾塊，則視不同的模特而定，要反復(fù)測(cè)試，直到“穿衣”速度和效果達(dá)到平衡為止。第四，處理好模特不同部位的坐標(biāo)，這些部位的坐標(biāo)要非常精準(zhǔn)，否則在“穿衣”的過(guò)程中就會(huì)在模塊銜接部位出現(xiàn)白邊。

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

本文網(wǎng)絡(luò)虛擬試衣間的設(shè)計(jì)是基于二維的，與現(xiàn)有的一些三維試衣效果相比，它有以下兩點(diǎn)優(yōu)勢(shì)。一是設(shè)計(jì)比較簡(jiǎn)單，僅僅利用ImageMagick技術(shù)中的遮罩技術(shù)即可實(shí)現(xiàn)，而且模特的設(shè)計(jì)也簡(jiǎn)單，模特完全可以從網(wǎng)上下載，僅做一些簡(jiǎn)單的處理即可成為試衣模特。二是模特在“穿衣”速度上則要快于三維試衣，但是二維圖形最大的不足之處在于試衣的效果顯然不能和三維的相比，三維圖像的試衣效果則非常逼真，而且可以實(shí)現(xiàn)多角度、多方位的視覺(jué)。

該設(shè)計(jì)需改進(jìn)之處：①在現(xiàn)有設(shè)計(jì)的基礎(chǔ)上進(jìn)一步增強(qiáng)模特的試衣效果，不斷地改進(jìn)試衣方法，加快模特試衣時(shí)的速度;②將模特?fù)Q成真人，通過(guò)攝像頭將用戶掃描進(jìn)電腦，然后將真人替換模特進(jìn)行試衣，這樣效果便會(huì)更加逼真，應(yīng)用范圍將可以擴(kuò)大。

參考文獻(xiàn)（References）：

[1] 軟件開(kāi)發(fā)技術(shù)聯(lián)盟.PHP開(kāi)發(fā)實(shí)例大全（提高卷）[M].清華大學(xué)出版社，2016.

[2] 鄧酩，楊鐵軍.基于水平集和ImageMagick的發(fā)貨確認(rèn)管理系統(tǒng)設(shè)計(jì)[J].計(jì)算機(jī)工程與設(shè)計(jì)，2012.33（6）：33-37

[3] （加）.海德，劉申.Rails開(kāi)發(fā)者指南[M].機(jī)械工業(yè)出版社，2009.

[4] David A.Black，鐘鳳鳴譯.Ruby程序員之道[M].人民郵電出版社，2016.

[5] （美）雷蒙德.Ajax on Rails[M].東南大學(xué)出版社，2007.

[6] 顧韋華.基于ImageMagick和Magickwand的Web圖像處理[C].南京大學(xué)，2010：45-49