瞳距測(cè)量APP的設(shè)計(jì)與實(shí)現(xiàn)

鄭溢鎧 吳澤權(quán) 鄭楓耀 黃震

摘? 要： 互聯(lián)網(wǎng)時(shí)代逐漸改變了人們的生活習(xí)慣，許多眼鏡店都有了相應(yīng)的網(wǎng)店。但由于網(wǎng)絡(luò)購(gòu)物形式的特定性，導(dǎo)致店家無(wú)法主動(dòng)獲得消費(fèi)者的近視度數(shù)和瞳距等主要信息，從而無(wú)法為消費(fèi)者制定一款合適的眼鏡。本應(yīng)用程序?qū)崿F(xiàn)了測(cè)量瞳孔距離的功能，可以讓用戶在網(wǎng)店配眼鏡時(shí)提供本人的瞳距信息。測(cè)量瞳距功能主要使用了OpenCV計(jì)算機(jī)視覺庫(kù)的分類器，并在此基礎(chǔ)上通過(guò)圖像形態(tài)學(xué)處理的方法對(duì)瞳孔進(jìn)行準(zhǔn)確的定位。

關(guān)鍵詞： 瞳距; OpenCV; 圖像形態(tài)學(xué); 定位瞳孔

中圖分類號(hào)：TP319? ? ? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A? ? ?文章編號(hào)：1006-8228（2020）11-70-05

Abstract： Internet age has gradually changed people's living habits; and many optical shops have corresponding store online. However， due to the specificity of online shopping， the store cannot actively obtain the main information such as the myopia degree and interpupillary distance of consumer， so that it is impossible to formulate suitable glasses for consumer. This application implements the function of measuring the pupil distance， allowing users to provide their interpupillary distance information when matching glasses in online stores. The pupil distance measurement function mainly uses the classifier of the OpenCV computer vision library， and on this basis， the pupil is accurately positioned by the method of image morphology processing.

Key words： pupil distance; OpenCV; image morphology; positioning pupil

0 引言

互聯(lián)網(wǎng)的發(fā)展掀起了網(wǎng)上購(gòu)物的潮流，許多眼鏡店都在網(wǎng)上開起了自己的網(wǎng)店。當(dāng)用戶要在網(wǎng)上配近視眼鏡時(shí)，除了需要知道自己的近視度數(shù)，還需要知道自己的瞳距，因此這讓不知道自己瞳距信息的用戶無(wú)法在網(wǎng)上適配眼鏡。雖然如今Android手機(jī)已經(jīng)被廣泛使用，但目前軟件市場(chǎng)上有關(guān)瞳距測(cè)量的APP依舊很少，因?yàn)榫珳?zhǔn)的瞳距數(shù)據(jù)和近視度數(shù)需要到有專業(yè)驗(yàn)光儀的實(shí)體眼鏡店或者眼科醫(yī)院測(cè)量和驗(yàn)光才能得到，但是，經(jīng)調(diào)查發(fā)現(xiàn)，多數(shù)眼鏡店并不支持用戶只測(cè)量而不配鏡。因此，將應(yīng)用程序打包成Web App[1]并運(yùn)行在Android手機(jī)上，利用測(cè)量瞳距的功能，就可以方便部分學(xué)生或者需要網(wǎng)店購(gòu)買眼鏡者在網(wǎng)店買到合適的眼鏡。

本應(yīng)用程序的核心功能為測(cè)量瞳距功能，它可以將圖像作為參數(shù)，利用OpenCV自帶分類器對(duì)其定位參數(shù)中可能存在的臉部區(qū)域，在檢測(cè)到該區(qū)域后，使用形態(tài)學(xué)處理圖像并定位瞳孔，最后通過(guò)參照物比較多次計(jì)算出瞳孔之間的距離并取其平均數(shù)據(jù)作為最終數(shù)據(jù)。

1 系統(tǒng)整體架構(gòu)

本應(yīng)用程序整體采用的是Web App應(yīng)用實(shí)現(xiàn)，用Web開發(fā)之后將其打包成App并在安卓系統(tǒng)上運(yùn)行。其中前端頁(yè)面使用Vue.js框架實(shí)現(xiàn)，并使用AJAX技術(shù)和后臺(tái)業(yè)務(wù)邏輯處理程序進(jìn)行交互，因?yàn)閂ue[2-3]框架的優(yōu)勢(shì)，使系統(tǒng)操作頁(yè)面整體看起來(lái)顯得更加美觀和簡(jiǎn)潔，同時(shí)提升了用戶使用應(yīng)用程序的良好體驗(yàn)。而后端開發(fā)則使用了現(xiàn)在十分流行的SpringBoo+MyBatis架構(gòu)[4-8]，SpringBoot+MyBatis框架能夠很好的完成前端數(shù)據(jù)、后臺(tái)業(yè)務(wù)邏輯處理以及數(shù)據(jù)庫(kù)的整體數(shù)據(jù)交互，Shiro框架則負(fù)責(zé)整個(gè)應(yīng)用程序的安全性和會(huì)話管理，存儲(chǔ)數(shù)據(jù)信息則交由MySQL數(shù)據(jù)庫(kù)來(lái)實(shí)現(xiàn)。本應(yīng)用程序系統(tǒng)架構(gòu)如圖1所示。

2 軟件設(shè)計(jì)

本應(yīng)用程序?qū)崿F(xiàn)的是一個(gè)WebAPP，主要用來(lái)測(cè)量人的瞳距，并為用戶提供眼鏡相關(guān)的資訊，如眼鏡介紹、護(hù)眼產(chǎn)品介紹以及相關(guān)文章的相關(guān)知識(shí)。主要實(shí)現(xiàn)以下幾個(gè)功能。

⑴ 登錄注冊(cè)功能：主要用于用戶在內(nèi)容資訊上發(fā)表評(píng)論。

⑵ 瞳距測(cè)量功能：通過(guò)攝像頭拍照或者手機(jī)相冊(cè)的照片進(jìn)行人臉識(shí)別并定位瞳孔，并自動(dòng)計(jì)算出瞳距。

⑶ 內(nèi)容資訊功能：該功能包括新款眼鏡推薦、護(hù)眼產(chǎn)品推薦、文章推薦三大模塊，為用戶提供相關(guān)的眼鏡信息。

其系統(tǒng)功能結(jié)構(gòu)如圖2所示。

2.1 用戶模塊設(shè)計(jì)

用戶模塊包括用戶登錄功能、注冊(cè)功能、以及忘記密碼功能。

2.1.1 用戶注冊(cè)功能設(shè)計(jì)

游客登錄系統(tǒng)輸入手機(jī)號(hào)碼后，前端利用AJAX技術(shù)檢測(cè)手機(jī)號(hào)碼是否唯一，若不存在，獲取驗(yàn)證碼后輸入驗(yàn)證碼和密碼，提交進(jìn)行驗(yàn)證，驗(yàn)證成功后則注冊(cè)成功。注冊(cè)功能的邏輯流程如圖3所示。

2.1.2 用戶登錄功能設(shè)計(jì)

游客填寫郵箱或者手機(jī)號(hào)碼和密碼并提交，后臺(tái)根據(jù)提交信息進(jìn)行判斷，若跟數(shù)據(jù)庫(kù)信息一致則登錄成功并跳轉(zhuǎn)至首頁(yè)，否則登錄失敗。登錄功能的邏輯流程如圖4所示。

2.1.3 忘記密碼功能設(shè)計(jì)

忘記密碼模塊中，用戶填寫手機(jī)號(hào)碼后前端會(huì)利用AJAX技術(shù)判斷數(shù)據(jù)庫(kù)是否存在該手機(jī)號(hào)碼，若存在，填寫手機(jī)驗(yàn)證碼和密碼并提交，提交的信息會(huì)與數(shù)據(jù)庫(kù)中存儲(chǔ)的用戶信息進(jìn)行比對(duì)，比對(duì)成功，用戶則修改密碼成功并跳轉(zhuǎn)回登錄頁(yè)。忘記密碼功能的邏輯流程如圖5所示。

2.2 內(nèi)容資訊模塊設(shè)計(jì)

內(nèi)容資訊模塊包含了三個(gè)小版塊，分別是眼鏡產(chǎn)品推薦、護(hù)眼產(chǎn)品推薦以及護(hù)眼知識(shí)文章推薦，內(nèi)容資訊模塊的邏輯流程如圖6所示。

2.3 瞳距測(cè)量模塊設(shè)計(jì)

瞳距測(cè)量模塊作為該應(yīng)用程序的核心功能模塊，用戶進(jìn)入該模塊頁(yè)面后，根據(jù)提示拍攝或讀取照片，該照片會(huì)被識(shí)別、處理、計(jì)算，最終得出瞳距的數(shù)值，并顯示在下方。瞳距測(cè)量模塊的邏輯流程如圖7所示。

3 瞳距測(cè)量算法設(shè)計(jì)

瞳距測(cè)量算法設(shè)計(jì)分為兩步驟，分別為定位瞳孔和參照物輪廓檢測(cè)。

3.1 定位瞳孔

定位瞳孔可以使用opencv中自帶的分類器[9]來(lái)定位到眼睛并截取眼睛附近區(qū)域，再通過(guò)數(shù)學(xué)形態(tài)學(xué)進(jìn)行消除噪聲處理，最終得到虹膜位置并通過(guò)獲取最小外接圓取得瞳孔中心位置。取到原圖片后進(jìn)行以下兩步操作。

⑴ 對(duì)輸入的彩色圖像進(jìn)行灰度處理[10]成像素值為0-255的灰色圖，采用OpenCV的人臉識(shí)別分類器haarcascade_frontalface_default.xml設(shè)定閾值識(shí)別出人臉，對(duì)人臉進(jìn)行裁剪，去除人臉外的干擾因素，如圖8所示。

⑵ 采用OpenCV眼睛識(shí)別分類器對(duì)裁剪出來(lái)的人臉圖像進(jìn)行眼睛識(shí)別并進(jìn)行裁剪，如圖9、10所示。

⑶ 接下來(lái)運(yùn)用圖像的形態(tài)學(xué)處理，先對(duì)裁剪出來(lái)的眼部圖像進(jìn)行二值化[11]，再定義3*3的矩形內(nèi)核，對(duì)二值化圖像進(jìn)行閉運(yùn)算操作去除眼珠中心的小黑點(diǎn);之后定義16*16橢圓內(nèi)核，對(duì)二值化圖像進(jìn)行開運(yùn)算操作去除眼瞼及眉毛等其他干擾因素[12-15];使用OpenCV的findContours（）方法獲得輪廓，然后利用minEnclosingCircle（）方法獲取最小外接圓的x、y坐標(biāo)和半徑。

⑷ 在OpenCV中，可以使用Imgproc類的circle函數(shù)對(duì)瞳孔進(jìn)行標(biāo)記，處理后效果如圖11、12所示。

3.2 參照物輪廓檢測(cè)

⑴ 裁剪處理：由于圖像背景復(fù)雜，事先申明將要識(shí)別圖形放置于特定區(qū)域內(nèi)，通過(guò)裁剪出特定區(qū)域，減小背景圖像的干擾，再對(duì)圖像進(jìn)行灰度化與中值濾波處理，得到平滑噪點(diǎn)處理后的圖像，如圖13所示。

⑵ 圖像二值化：中值濾波后圖像的單個(gè)像素值范圍在0-255，選取適當(dāng)?shù)拈撝祵?duì)灰度圖進(jìn)行二值化處理，使用的方法是threshold（）。像素點(diǎn)只有0（黑）或1（白），比灰度圖更加容易對(duì)圖像進(jìn)行特征描述，如圖14所示。

但是二值化后的圖像存在多處大小不一的噪聲點(diǎn)，我們利用尋找圖像的輪廓，對(duì)于近似50*50的所有輪廓區(qū)域，使用黑色進(jìn)行填充，再對(duì)最大的輪廓區(qū)域使用白色進(jìn)行填充，能得到一個(gè)明顯的身份證圖形，如圖15所示。

⑶ 輪廓檢測(cè)[16-17]：進(jìn)行完以上步驟后，圖像輪廓清晰，接著使用findContours（）方法，獲取到輪廓信息并描繪出矩形輪廓后，用boundingRect（）方法獲取輪廓寬度，即可得出身份證在圖像中的寬度大小，如圖16所示。

⑷ 最終通過(guò)雙眼之間的像素點(diǎn)、檢測(cè)到的矩形輪廓寬度像素點(diǎn)的比例和身份證件照的真實(shí)寬度計(jì)算出真實(shí)瞳距。

4 瞳距測(cè)量模塊實(shí)現(xiàn)

瞳距測(cè)量模塊設(shè)計(jì)思路：點(diǎn)擊首頁(yè)上的瞳距測(cè)量，用戶進(jìn)入瞳距測(cè)量頁(yè)面，點(diǎn)擊開啟按鈕打開攝像頭，“放置身份證”區(qū)域?yàn)榉胖蒙矸葑C的區(qū)域。點(diǎn)擊拍照按鈕進(jìn)行拍照，用戶在拍照過(guò)程保持現(xiàn)場(chǎng)光線明亮，如圖17所示。

拍照之后下方顯示用戶拍攝后得到的瞳孔距離。點(diǎn)擊關(guān)閉，將關(guān)閉攝像頭，如圖18所示。

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

本應(yīng)用程序主要基于人臉識(shí)別技術(shù)，利用OpenCV計(jì)算機(jī)視覺庫(kù)和圖像形態(tài)學(xué)處理技術(shù)實(shí)現(xiàn)了瞳距測(cè)量的功能，并將其部署在Android平臺(tái)上。在開發(fā)過(guò)程中，還是存在不足之處，比如在界面設(shè)計(jì)上存在欠缺、頁(yè)面不夠精美等。接下來(lái)的研究方向?yàn)轫?yè)面的美化以及對(duì)瞳距測(cè)量的算法進(jìn)一步的優(yōu)化。

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

[1] 王建翠，陳育才.基于HTML5技術(shù)的移動(dòng)Web前端設(shè)計(jì)與開發(fā)分析[J].計(jì)算機(jī)產(chǎn)品與流通，2019.10：25

[2] 陳巖.輕量級(jí)響應(yīng)式框架Vue.js應(yīng)用分析[J].中國(guó)管理信息化，2018.21：181-183

[3] 呂英華.漸進(jìn)式JavaScript框架Vue.js的全家桶應(yīng)用[J].電子技術(shù)與軟件工程，2019.22：39-40

[4] 陳倩怡，何軍.Vue+Springboot+MyBatis技術(shù)應(yīng)用解析[J].電腦編程技巧與維護(hù)，2020.1：14-15

[5] 王天順，程杰，張志文.MyBatis在《Web中間件技術(shù)》課程中的應(yīng)用[J].教育教學(xué)論壇，2019.38：204-205

[6] 徐孝成.基于Shiro的Web應(yīng)用安全框架的設(shè)計(jì)與實(shí)現(xiàn)[J].電腦知識(shí)與技術(shù)，2015.11（16）：93-95

[7] 丁潔.基于Shiro的Web應(yīng)用安全框架設(shè)計(jì)研究[J].信息與電腦（理論版），2018.13：38-39

[8] 焦鵬琿.基于SpringBoot和Vue框架的電子招投標(biāo)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].南京大學(xué)，2018.

[9] 姜太平，汪小帆，潘祥.一種改進(jìn)的基于人臉圖像的瞳孔精確檢測(cè)方法[J].小型微型計(jì)算機(jī)系統(tǒng)，2018.39（4）：842-846

[10] 秦志新.計(jì)算機(jī)技術(shù)在圖像形態(tài)學(xué)處理中的應(yīng)用探討[J].普洱學(xué)院學(xué)報(bào)，2019.35（6）：24-26

[11] 陳海峰，丁麗麗.二值化圖像的灰度處理算法研究[J].電腦與電信，2019.7：34-38

[12] 高薪，胡月，杜威等.腐蝕膨脹算法對(duì)灰度圖像去噪的應(yīng)用[J].北京印刷學(xué)院學(xué)報(bào)，2014.4：63-65

[14] 張瑩.開閉運(yùn)算在消除圖象噪聲中的應(yīng)用研究[J]. 濰坊學(xué)院學(xué)報(bào)，2002.2：65-66

[15] 陳尹剛.基于數(shù)學(xué)形態(tài)學(xué)圖像處理算法研究[J].信息通信，2019.12：67-68

[16] 卜飛宇.一種基于邊緣直線檢測(cè)的矩形提取方法[J].電腦知識(shí)與技術(shù)，2017.13（31）：182-184

[17] 吳紹根，聶為清，路利軍等.形狀的圓內(nèi)距離變換[J].中國(guó)圖象圖形學(xué)報(bào)，2018.261（1）：43-55