基于ImageMagick技術(shù)的網(wǎng)絡(luò)虛擬試衣間的設(shè)計

劉志榮

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

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

中圖分類號：TP317.49? ? ? ? ? 文獻標志碼：A? ? ?文章編號：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 引言

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

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

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

1 ImageMagick簡介

1.1 ImageMagick簡介

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

1.2 ImageMagick的功能特點

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

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

2 ImageMagick的技術(shù)原理

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

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

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

2.2 Alpha通道遮罩的工作原理

alpha通道的存在，可以使用合成代數(shù)來表示合成圖像操作。例如，給定兩個圖像元素A和B，最常見的合成操作是結(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所示。實際上，OVER操作符是正常的繪畫操作，而IN運算符是alpha合成等效剪輯。作為一個例子，可以通過下面的公式來實現(xiàn)每個像素值的OVER運算符。

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

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

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

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

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

3.2 處理試衣模特

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

3.3 在線試衣的實現(xiàn)過程

⑴ 模特定位

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

⑵ 模特“穿衣”

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

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

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

4 結(jié)束語

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

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

參考文獻（References）：

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

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

[3] （加）.海德，劉申.Rails開發(fā)者指南[M].機械工業(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