朱雯曦 張錚

摘要：在“互聯(lián)網(wǎng)+”的大好形勢(shì)下，企業(yè)對(duì)于服裝平臺(tái)的要求也越來(lái)越高。在深入研究互聯(lián)網(wǎng)，云計(jì)算技術(shù)及移動(dòng)應(yīng)用開發(fā)的基礎(chǔ)上，根據(jù)lamp環(huán)境，利用linux系統(tǒng)和apache、webgl技術(shù)，使用html5、css3、JavaScript、php語(yǔ)言開發(fā)的一套網(wǎng)站，根據(jù)實(shí)際要求，構(gòu)建了合理的mysql數(shù)據(jù)庫(kù)，實(shí)現(xiàn)了對(duì)數(shù)據(jù)的訪問(wèn)以及調(diào)用和修改。利用php技術(shù)實(shí)現(xiàn)了后臺(tái)功能，使用百度AI與AJAX接口實(shí)現(xiàn)了圖像自動(dòng)審核技術(shù)。并利用JavaScript技術(shù)、AJAX等前后端技術(shù)模板文件導(dǎo)入系統(tǒng)，利用Ruby開發(fā)的圖像采集模塊，快速去讀取模板文件上的花色元素，利用基本對(duì)元素進(jìn)行智能替換的方式，增加了花色智能設(shè)計(jì)系統(tǒng)，能夠在線對(duì)衣服進(jìn)行搭配。

關(guān)鍵詞：webgl、百度AI、花色智能設(shè)計(jì)系統(tǒng)

本系統(tǒng)區(qū)別于其他傳統(tǒng)的電商平臺(tái)，是一個(gè)基于webGL、百度AI技術(shù)的智能服裝平臺(tái)，致力于為用戶提供個(gè)性化搭配需求的平臺(tái)，其主旨是為了提升用戶搭配能力，實(shí)現(xiàn)“完美搭配服裝，不為搭配煩惱，打破令人難以忍受的穿衣風(fēng)格”的理念。

1、關(guān)鍵技術(shù)實(shí)現(xiàn)

1.1“虛擬試衣”功能介紹

AJAX技術(shù)在不刷新頁(yè)面的情況下，進(jìn)行衣物的搭配、一鍵下單，并且響應(yīng)速度非?？欤o用戶節(jié)省更多的搭配頁(yè)面加載時(shí)間，提高了購(gòu)衣搭配體驗(yàn)，并且節(jié)省相當(dāng)多的帶寬。試衣間利用微信小程序獨(dú)有的WXML與WXSS構(gòu)建出試衣場(chǎng)景，在試衣間中可以選擇男女模特，對(duì)男女裝的服飾進(jìn)行搭配。選擇衣物進(jìn)行搭配時(shí)利用AJAX的無(wú)刷新技術(shù)，輕松實(shí)現(xiàn)衣物的快速搭配更換，整個(gè)搭配過(guò)程輕松無(wú)痛、快捷方便。

1.2“花色智能設(shè)計(jì)”功能介紹

花色智能設(shè)計(jì)是提供給商戶設(shè)計(jì)師的一個(gè)設(shè)計(jì)平臺(tái)，前端采用JavaScript技術(shù)、AJAX等前后端技術(shù)模板文件導(dǎo)入系統(tǒng)，利用Ruby開發(fā)的圖像采集模塊，快速去讀取模板文件上的花色元素，記住每個(gè)元素的坐標(biāo)并分組，并將這些坐標(biāo)保存成json文件?；ㄉ悄茉O(shè)計(jì)系統(tǒng)讀取json文件，利用基本對(duì)元素進(jìn)行智能替換，在短時(shí)間里完成一張新的花色的繪制。整個(gè)設(shè)計(jì)過(guò)程無(wú)需專業(yè)人員參與，就能生成比較專業(yè)的設(shè)計(jì)花色，效率很高，使用過(guò)的花色都可以保存為模板，利用某個(gè)模板2小時(shí)能生成100張?jiān)O(shè)計(jì)圖，從中優(yōu)選，從而獲得不一樣的靈感。

1.3“衣維指數(shù)”功能介紹

“衣維指數(shù)”提供給商戶一個(gè)店鋪數(shù)據(jù)分析的平臺(tái)，利用ECharts圖表結(jié)合AJAX技術(shù)將店鋪數(shù)據(jù)動(dòng)態(tài)的用可視化圖表展示給店鋪，供商戶分析、決策使用，同時(shí)我們也提供了“衣維指數(shù)——行業(yè)數(shù)據(jù)”供商戶參考，通過(guò)“衣維指數(shù)”可以充分了解到“衣維網(wǎng)”的市場(chǎng)，做出相應(yīng)的決策。我們的數(shù)據(jù)分析涉及到了JavaScript、ECharts、AJAX。

ECharts，是一個(gè)純Javascript的圖表庫(kù)，可以流暢的運(yùn)行在PC和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器，底層依賴輕量級(jí)的Canvas類庫(kù)ZRender，提供直觀，生動(dòng)，可交互，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。ECharts提供了常規(guī)的折線圖、柱狀圖、散點(diǎn)圖、餅圖、k線圖，并且支持圖與圖之間的混搭。利用ECharts我們可以很輕松的將動(dòng)態(tài)的數(shù)據(jù)導(dǎo)入，ECharts會(huì)自動(dòng)找到新舊兩組數(shù)據(jù)之間的差異然后通過(guò)合適的動(dòng)畫去表現(xiàn)數(shù)據(jù)的變化。并且由于是純JavaScript的圖表，帶來(lái)了數(shù)據(jù)體積的減少，節(jié)省了相當(dāng)多的帶寬資源。AJAX技術(shù)，利用AJAX動(dòng)態(tài)獲取數(shù)據(jù)并將數(shù)據(jù)導(dǎo)入ECharts圖表，動(dòng)態(tài)的展示數(shù)據(jù)，由于響應(yīng)快數(shù)據(jù)量小，使得數(shù)據(jù)分析更加快捷方便。

在店鋪管理界面可以直接點(diǎn)擊進(jìn)入“指數(shù)”界面，可以選擇“妙裝指數(shù)——店鋪數(shù)據(jù)分析”和“妙裝指南——行業(yè)數(shù)據(jù)分析”，在“店鋪數(shù)據(jù)分析”界面內(nèi)可以點(diǎn)擊查看各類店鋪數(shù)據(jù)，如“店鋪訪問(wèn)量”、“商品訪問(wèn)量”、“轉(zhuǎn)化率”等相關(guān)店鋪數(shù)據(jù)；在“行業(yè)數(shù)據(jù)分析”界面內(nèi)可以查看各類行業(yè)數(shù)據(jù)，如“平臺(tái)男女比例”、“購(gòu)物男女比例”、“服裝銷售數(shù)據(jù)”等相關(guān)數(shù)據(jù)。

獲取數(shù)據(jù)庫(kù)中的數(shù)據(jù)相關(guān)代碼如下：

$.ajax（{url： SCOPE.yesterdayData， type： get， dataType： json， async： false，

success： function （data） {yesterdayData=data； console.log（yesterdayData[0]）； } }）；

$ajax（{url： SCOPE.terdayData， type： get， dataType：json， async： false，

success： function （data） { terdayData=data； console. log（terdayData）； }}）；

// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例

var myChart=echarts.init（document.getElementById（main））；

// 指定圖表的配置項(xiàng)和數(shù)據(jù)

var colors = [#5793f3， #d14a61， #675bba]；

option = { title： {text： 店鋪訪問(wèn)量， subtext： （單位/人）， x： center， textStyle： { color： #424242 } }，

color： colors， tooltip： {trigger： none， axisPointer： {type：cross }}，

legend： {data： [昨日訪客量量， 今日訪客量]， x： left}，

grid： {top： 70， bottom： 50}，

xAxis： [{type： category， axisTick： {alignWithLabel： true}，

axisLine：{onZero：false，lineStyle： color： colors[1] } }，

{ type： category， axisLine： {onZero： false， lineStyle： { color： colors[0] } }，

axisPointer： { label： {formatter： function （params） { return 訪客量 + params.value + （params.seriesData. length ？ ： + params.seriesData[0].data ： ）； } } }，

data： theTime}]， yAxis： [{type： value} ]， series： [{name：昨日訪客量量， type： line， xAxisIndex： 1， smooth： true， data： yesterdayData }， {name： 今日訪客量， type： line， smooth： true， data： terdayData }] }

// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。

myChart.setOption（option）；

1.4“自動(dòng)圖像審核”功能介紹

衣維網(wǎng)具有自動(dòng)圖像審核功能，能夠保證商家在上傳圖片時(shí)，不會(huì)因?yàn)閳D片審核而浪費(fèi)時(shí)間，從而提高工作效率?！耙戮S網(wǎng)”利用百度AI與AJAX技術(shù)及時(shí)對(duì)上傳圖片進(jìn)行審核。

百度AI圖片審核，能夠準(zhǔn)確識(shí)別商家和用戶上傳的圖片和視頻中的涉及到涉黃、涉暴、涉恐和敏感性內(nèi)容，阻止商家上傳，并能篩選出美觀、清晰度高的圖片，提高人工審核的效率。同時(shí)AJAX技術(shù)在不刷新頁(yè)面的情況下，進(jìn)行圖片的審核，并且響應(yīng)速度非?？欤o商戶節(jié)省更多的審核等待時(shí)間，并且節(jié)省相當(dāng)多的帶寬。

衣維網(wǎng)項(xiàng)目實(shí)現(xiàn)了服裝科技，它通過(guò)3D試衣間在線試衣，能大大節(jié)省試衣時(shí)間，增加用戶對(duì)于試衣搭配的興趣，打破傳統(tǒng)試衣間模式，實(shí)現(xiàn)輕松搭配，省去了線下進(jìn)行試衣搭配的時(shí)間，提高購(gòu)買效率，利用更加快捷的自動(dòng)圖像審核功能，提高了后臺(tái)人員的工作效率，并且使用花色智能設(shè)計(jì)系統(tǒng)，大大提高了服裝設(shè)計(jì)效率，縮短了設(shè)計(jì)周期。

參考文獻(xiàn)：

[1] 基于WebGL的交互平臺(tái)設(shè)計(jì)與實(shí)現(xiàn)[J]. 汪浩，田豐，張文俊. 電子測(cè)量技術(shù). 2015（08）

[2] 一種改進(jìn)的HSI圖像融合算法[J]. 劉建偉，侯翔文. 西安工業(yè)大學(xué)學(xué)報(bào). 2013（05）

[3] 圖像紋理特征提取方法綜述[J]. 劉麗，匡綱要. 中國(guó)圖象圖形學(xué)報(bào). 2009（04）

[4] 基于HSI顏色空間的彩色邊緣檢測(cè)方法研究[J]. 孫慧賢，張玉華，羅飛路. 光學(xué)技術(shù). 2009（02）

[5] 圖像插值技術(shù)綜述[J]. 符祥，郭寶龍. 計(jì)算機(jī)工程與設(shè)計(jì). 2009（01）

[6] 國(guó)內(nèi)外紡織CAD發(fā)展?fàn)顩r及動(dòng)向[J]. 任鶯，張瑞云，李汝勤. 紡織學(xué)報(bào). 1999（06）

[7] 基于深度學(xué)習(xí)的車牌檢測(cè)[D]. 田媛美.西安電子科技大學(xué) 2017

[8] 光照、幾何偏轉(zhuǎn)魯棒的車牌定位方法研究[D]. 羅永亮.西安理工大學(xué) 2016

[9] Web 3D技術(shù)綜述[J]. 艾達(dá)，喬明明，李敏. 微型機(jī)與應(yīng)用. 2014（02）

[10] Flash3D引擎的發(fā)展現(xiàn)狀剖析及若干關(guān)鍵技術(shù)研究[J]. 閆豐亭，劉暢，賈金原. 系統(tǒng)仿真學(xué)報(bào). 2013（10）

[11] 基于java3D的Web3D技術(shù)在數(shù)據(jù)可視化中研究與應(yīng)用[D]. 吳昊.上海交通大學(xué) 2010

[12] "An overview of lidar processing software Technical report". J.Fernandez，A.Singhania，J.Caceres，K. Slatton，R.K.M Starek. Geosensing Engineering and Mapping . 2007

[13] "Pointcloud visualization in an open source 3d glob3". M.De La alle，D.Gómez-Deck，O.Koehler，F(xiàn).Pulido. International Archives of the Photogrammetry，Remote Sensing and Spatial Information Sciences，Volume XXXVIII-5/W16，2011ISPRS Trento 2011 Workshop . 2011

作者簡(jiǎn)介： 朱雯曦，紹興職業(yè)技術(shù)學(xué)院；張錚，紹興職業(yè)技術(shù)學(xué)院。