基于WebGL、百度AI技术的智能服装平台关键技术研究

朱雯曦 张铮

摘要：在“互联网+”的大好形势下，企业对于服装平台的要求也越来越高。在深入研究互联网，云计算技术及移动应用开发的基础上，根据lamp环境，利用linux系统和apache、webgl技术，使用html5、css3、JavaScript、php语言开发的一套网站，根据实际要求，构建了合理的mysql数据库，实现了对数据的访问以及调用和修改。利用php技术实现了后台功能，使用百度AI与AJAX接口实现了图像自动审核技术。并利用JavaScript技术、AJAX等前后端技术模板文件导入系统，利用Ruby开发的图像采集模块，快速去读取模板文件上的花色元素，利用基本对元素进行智能替换的方式，增加了花色智能设计系统，能够在线对衣服进行搭配。

关键词：webgl、百度AI、花色智能设计系统

本系统区别于其他传统的电商平台，是一个基于webGL、百度AI技术的智能服装平台，致力于为用户提供个性化搭配需求的平台，其主旨是为了提升用户搭配能力，实现“完美搭配服装，不为搭配烦恼，打破令人难以忍受的穿衣风格”的理念。

1、关键技术实现

1.1“虚拟试衣”功能介绍

AJAX技术在不刷新页面的情况下，进行衣物的搭配、一键下单，并且响应速度非常快，给用户节省更多的搭配页面加载时间，提高了购衣搭配体验，并且节省相当多的带宽。试衣间利用微信小程序独有的WXML与WXSS构建出试衣场景，在试衣间中可以选择男女模特，对男女装的服饰进行搭配。选择衣物进行搭配时利用AJAX的无刷新技术，轻松实现衣物的快速搭配更换，整个搭配过程轻松无痛、快捷方便。

1.2“花色智能设计”功能介绍

花色智能设计是提供给商户设计师的一个设计平台，前端采用JavaScript技术、AJAX等前后端技术模板文件导入系统，利用Ruby开发的图像采集模块，快速去读取模板文件上的花色元素，记住每个元素的坐标并分组，并将这些坐标保存成json文件。花色智能设计系统读取json文件，利用基本对元素进行智能替换，在短时间里完成一张新的花色的绘制。整个设计过程无需专业人员参与，就能生成比较专业的设计花色，效率很高，使用过的花色都可以保存为模板，利用某个模板2小时能生成100张设计图，从中优选，从而获得不一样的灵感。

1.3“衣维指数”功能介绍

“衣维指数”提供给商户一个店铺数据分析的平台，利用ECharts图表结合AJAX技术将店铺数据动态的用可视化图表展示给店铺，供商户分析、决策使用，同时我们也提供了“衣维指数——行业数据”供商户参考，通过“衣维指数”可以充分了解到“衣维网”的市场，做出相应的决策。我们的数据分析涉及到了JavaScript、ECharts、AJAX。

ECharts，是一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器，底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。ECharts提供了常规的折线图、柱状图、散点图、饼图、k线图，并且支持图与图之间的混搭。利用ECharts我们可以很轻松的将动态的数据导入，ECharts会自动找到新旧两组数据之间的差异然后通过合适的动画去表现数据的变化。并且由于是纯JavaScript的图表，带来了数据体积的减少，节省了相当多的带宽资源。AJAX技术，利用AJAX动态获取数据并将数据导入ECharts图表，动态的展示数据，由于响应快数据量小，使得数据分析更加快捷方便。

在店铺管理界面可以直接点击进入“指数”界面，可以选择“妙装指数——店铺数据分析”和“妙装指南——行业数据分析”，在“店铺数据分析”界面内可以点击查看各类店铺数据，如“店铺访问量”、“商品访问量”、“转化率”等相关店铺数据；在“行业数据分析”界面内可以查看各类行业数据，如“平台男女比例”、“购物男女比例”、“服装销售数据”等相关数据。

获取数据库中的数据相关代码如下：

$.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）； }}）；

// 基于準备好的dom，初始化echarts实例

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

// 指定图表的配置项和数据

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

option = { title： {text： 店铺访问量， 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 }] }

// 使用刚指定的配置项和数据显示图表。

myChart.setOption（option）；

1.4“自动图像审核”功能介绍

衣维网具有自动图像审核功能，能够保证商家在上传图片时，不会因为图片审核而浪费时间，从而提高工作效率。“衣维网”利用百度AI与AJAX技术及时对上传图片进行审核。

百度AI图片审核，能够准确识别商家和用户上传的图片和视频中的涉及到涉黄、涉暴、涉恐和敏感性内容，阻止商家上传，并能筛选出美观、清晰度高的图片，提高人工审核的效率。同时AJAX技术在不刷新页面的情况下，进行图片的审核，并且响应速度非常快，给商户节省更多的审核等待时间，并且节省相当多的带宽。

衣维网项目实现了服装科技，它通过3D试衣间在线试衣，能大大节省试衣时间，增加用户对于试衣搭配的兴趣，打破传统试衣间模式，实现轻松搭配，省去了线下进行试衣搭配的时间，提高购买效率，利用更加快捷的自动图像审核功能，提高了后台人员的工作效率，并且使用花色智能设计系统，大大提高了服装设计效率，缩短了设计周期。

参考文献：

[1] 基于WebGL的交互平台设计与实现[J]. 汪浩，田丰，张文俊. 电子测量技术. 2015（08）

[2] 一种改进的HSI图像融合算法[J]. 刘建伟，侯翔文. 西安工业大学学报. 2013（05）

[3] 图像纹理特征提取方法综述[J]. 刘丽，匡纲要. 中国图象图形学报. 2009（04）

[4] 基于HSI颜色空间的彩色边缘检测方法研究[J]. 孙慧贤，张玉华，罗飞路. 光学技术. 2009（02）

[5] 图像插值技术综述[J]. 符祥，郭宝龙. 计算机工程与设计. 2009（01）

[6] 国内外纺织CAD发展状况及动向[J]. 任莺，张瑞云，李汝勤. 纺织学报. 1999（06）

[7] 基于深度学习的车牌检测[D]. 田媛美.西安电子科技大学 2017

[8] 光照、几何偏转鲁棒的车牌定位方法研究[D]. 罗永亮.西安理工大学 2016

[9] Web 3D技术综述[J]. 艾达，乔明明，李敏. 微型机与应用. 2014（02）

[10] Flash3D引擎的发展现状剖析及若干关键技术研究[J]. 闫丰亭，刘畅，贾金原. 系统仿真学报. 2013（10）

[11] 基于java3D的Web3D技术在数据可视化中研究与应用[D]. 吴昊.上海交通大学 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.Pulido. International Archives of the Photogrammetry，Remote Sensing and Spatial Information Sciences，Volume XXXVIII-5/W16，2011ISPRS Trento 2011 Workshop . 2011

作者簡介： 朱雯曦，绍兴职业技术学院；张铮，绍兴职业技术学院。