基于ImageMagick技術的網絡虛擬試衣間的設計

劉志榮

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

關鍵詞： 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 引言

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

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

本設計采用了ImageMagick圖形處理技術來實現網絡試衣功能。該技術實現比較方便，能很好的結合Ruby On Rails開發平臺來實現二維試衣效果。

1 ImageMagick簡介

1.1 ImageMagick簡介

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

1.2 ImageMagick的功能特點

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

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

2 ImageMagick的技術原理

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

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

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

2.2 Alpha通道遮罩的工作原理

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

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

3 基于ROR[3]環境的虛擬試衣功能的實現

該網絡虛擬試衣間在Ruby On Rails開發環境中實現了網上試衣功能。系統的設計思想是采用遮罩原理，將不同的衣服、花型等不同的圖案在已選擇好的模特上顯示，用戶則可以根據顯示的不同效果作出購衣選擇。功能的具體實現過程如下。

3.1 精選不同風格的試衣模特

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

3.2 處理試衣模特

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

3.3 在線試衣的實現過程

⑴ 模特定位

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

⑵ 模特“穿衣”

通過模特定位可以得出模特的每個部分精準的位置坐標。再由程序將模特的每一部分進行遮罩操作，為它們分別“穿衣”。最終將這些“穿”好衣服的不同模特部分拼裝在一起，就構成了一幅完整的模特服裝。在操作上，用戶只要點擊不同的衣服或花型的圖形，則相應的模特便會“穿”上這些衣服，以供用戶選擇。

⑶ 操作過程中的關鍵點

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

4 結束語

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

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

參考文獻（References）：

[1] 軟件開發技術聯盟.PHP開發實例大全（提高卷）[M].清華大學出版社，2016.

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

[3] （加）.海德，劉申.Rails開發者指南[M].機械工業出版社，2009.

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

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

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