鄭溢鎧 吳澤權(quán) 鄭楓耀 黃震
摘? 要: 互聯(lián)網(wǎng)時代逐漸改變了人們的生活習(xí)慣,許多眼鏡店都有了相應(yīng)的網(wǎng)店。但由于網(wǎng)絡(luò)購物形式的特定性,導(dǎo)致店家無法主動獲得消費者的近視度數(shù)和瞳距等主要信息,從而無法為消費者制定一款合適的眼鏡。本應(yīng)用程序?qū)崿F(xiàn)了測量瞳孔距離的功能,可以讓用戶在網(wǎng)店配眼鏡時提供本人的瞳距信息。測量瞳距功能主要使用了OpenCV計算機視覺庫的分類器,并在此基礎(chǔ)上通過圖像形態(tài)學(xué)處理的方法對瞳孔進行準(zhǔn)確的定位。
關(guān)鍵詞: 瞳距; OpenCV; 圖像形態(tài)學(xué); 定位瞳孔
中圖分類號:TP319? ? ? ? ? 文獻標(biāo)識碼:A? ? ?文章編號: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)上購物的潮流,許多眼鏡店都在網(wǎng)上開起了自己的網(wǎng)店。當(dāng)用戶要在網(wǎng)上配近視眼鏡時,除了需要知道自己的近視度數(shù),還需要知道自己的瞳距,因此這讓不知道自己瞳距信息的用戶無法在網(wǎng)上適配眼鏡。雖然如今Android手機已經(jīng)被廣泛使用,但目前軟件市場上有關(guān)瞳距測量的APP依舊很少,因為精準(zhǔn)的瞳距數(shù)據(jù)和近視度數(shù)需要到有專業(yè)驗光儀的實體眼鏡店或者眼科醫(yī)院測量和驗光才能得到,但是,經(jīng)調(diào)查發(fā)現(xiàn),多數(shù)眼鏡店并不支持用戶只測量而不配鏡。因此,將應(yīng)用程序打包成Web App[1]并運行在Android手機上,利用測量瞳距的功能,就可以方便部分學(xué)生或者需要網(wǎng)店購買眼鏡者在網(wǎng)店買到合適的眼鏡。
本應(yīng)用程序的核心功能為測量瞳距功能,它可以將圖像作為參數(shù),利用OpenCV自帶分類器對其定位參數(shù)中可能存在的臉部區(qū)域,在檢測到該區(qū)域后,使用形態(tài)學(xué)處理圖像并定位瞳孔,最后通過參照物比較多次計算出瞳孔之間的距離并取其平均數(shù)據(jù)作為最終數(shù)據(jù)。
1 系統(tǒng)整體架構(gòu)
本應(yīng)用程序整體采用的是Web App應(yīng)用實現(xiàn),用Web開發(fā)之后將其打包成App并在安卓系統(tǒng)上運行。其中前端頁面使用Vue.js框架實現(xiàn),并使用AJAX技術(shù)和后臺業(yè)務(wù)邏輯處理程序進行交互,因為Vue[2-3]框架的優(yōu)勢,使系統(tǒng)操作頁面整體看起來顯得更加美觀和簡潔,同時提升了用戶使用應(yīng)用程序的良好體驗。而后端開發(fā)則使用了現(xiàn)在十分流行的SpringBoo+MyBatis架構(gòu)[4-8],SpringBoot+MyBatis框架能夠很好的完成前端數(shù)據(jù)、后臺業(yè)務(wù)邏輯處理以及數(shù)據(jù)庫的整體數(shù)據(jù)交互,Shiro框架則負責(zé)整個應(yīng)用程序的安全性和會話管理,存儲數(shù)據(jù)信息則交由MySQL數(shù)據(jù)庫來實現(xiàn)。本應(yīng)用程序系統(tǒng)架構(gòu)如圖1所示。
2 軟件設(shè)計
本應(yīng)用程序?qū)崿F(xiàn)的是一個WebAPP,主要用來測量人的瞳距,并為用戶提供眼鏡相關(guān)的資訊,如眼鏡介紹、護眼產(chǎn)品介紹以及相關(guān)文章的相關(guān)知識。主要實現(xiàn)以下幾個功能。
⑴ 登錄注冊功能:主要用于用戶在內(nèi)容資訊上發(fā)表評論。
⑵ 瞳距測量功能:通過攝像頭拍照或者手機相冊的照片進行人臉識別并定位瞳孔,并自動計算出瞳距。
⑶ 內(nèi)容資訊功能:該功能包括新款眼鏡推薦、護眼產(chǎn)品推薦、文章推薦三大模塊,為用戶提供相關(guān)的眼鏡信息。
其系統(tǒng)功能結(jié)構(gòu)如圖2所示。
2.1 用戶模塊設(shè)計
用戶模塊包括用戶登錄功能、注冊功能、以及忘記密碼功能。
2.1.1 用戶注冊功能設(shè)計
游客登錄系統(tǒng)輸入手機號碼后,前端利用AJAX技術(shù)檢測手機號碼是否唯一,若不存在,獲取驗證碼后輸入驗證碼和密碼,提交進行驗證,驗證成功后則注冊成功。注冊功能的邏輯流程如圖3所示。
2.1.2 用戶登錄功能設(shè)計
游客填寫郵箱或者手機號碼和密碼并提交,后臺根據(jù)提交信息進行判斷,若跟數(shù)據(jù)庫信息一致則登錄成功并跳轉(zhuǎn)至首頁,否則登錄失敗。登錄功能的邏輯流程如圖4所示。
2.1.3 忘記密碼功能設(shè)計
忘記密碼模塊中,用戶填寫手機號碼后前端會利用AJAX技術(shù)判斷數(shù)據(jù)庫是否存在該手機號碼,若存在,填寫手機驗證碼和密碼并提交,提交的信息會與數(shù)據(jù)庫中存儲的用戶信息進行比對,比對成功,用戶則修改密碼成功并跳轉(zhuǎn)回登錄頁。忘記密碼功能的邏輯流程如圖5所示。
2.2 內(nèi)容資訊模塊設(shè)計
內(nèi)容資訊模塊包含了三個小版塊,分別是眼鏡產(chǎn)品推薦、護眼產(chǎn)品推薦以及護眼知識文章推薦,內(nèi)容資訊模塊的邏輯流程如圖6所示。
2.3 瞳距測量模塊設(shè)計
瞳距測量模塊作為該應(yīng)用程序的核心功能模塊,用戶進入該模塊頁面后,根據(jù)提示拍攝或讀取照片,該照片會被識別、處理、計算,最終得出瞳距的數(shù)值,并顯示在下方。瞳距測量模塊的邏輯流程如圖7所示。
3 瞳距測量算法設(shè)計
瞳距測量算法設(shè)計分為兩步驟,分別為定位瞳孔和參照物輪廓檢測。
3.1 定位瞳孔
定位瞳孔可以使用opencv中自帶的分類器[9]來定位到眼睛并截取眼睛附近區(qū)域,再通過數(shù)學(xué)形態(tài)學(xué)進行消除噪聲處理,最終得到虹膜位置并通過獲取最小外接圓取得瞳孔中心位置。取到原圖片后進行以下兩步操作。
⑴ 對輸入的彩色圖像進行灰度處理[10]成像素值為0-255的灰色圖,采用OpenCV的人臉識別分類器haarcascade_frontalface_default.xml設(shè)定閾值識別出人臉,對人臉進行裁剪,去除人臉外的干擾因素,如圖8所示。
⑵ 采用OpenCV眼睛識別分類器對裁剪出來的人臉圖像進行眼睛識別并進行裁剪,如圖9、10所示。
⑶ 接下來運用圖像的形態(tài)學(xué)處理,先對裁剪出來的眼部圖像進行二值化[11],再定義3*3的矩形內(nèi)核,對二值化圖像進行閉運算操作去除眼珠中心的小黑點;之后定義16*16橢圓內(nèi)核,對二值化圖像進行開運算操作去除眼瞼及眉毛等其他干擾因素[12-15];使用OpenCV的findContours()方法獲得輪廓,然后利用minEnclosingCircle()方法獲取最小外接圓的x、y坐標(biāo)和半徑。
⑷ 在OpenCV中,可以使用Imgproc類的circle函數(shù)對瞳孔進行標(biāo)記,處理后效果如圖11、12所示。
3.2 參照物輪廓檢測
⑴ 裁剪處理:由于圖像背景復(fù)雜,事先申明將要識別圖形放置于特定區(qū)域內(nèi),通過裁剪出特定區(qū)域,減小背景圖像的干擾,再對圖像進行灰度化與中值濾波處理,得到平滑噪點處理后的圖像,如圖13所示。
⑵ 圖像二值化:中值濾波后圖像的單個像素值范圍在0-255,選取適當(dāng)?shù)拈撝祵叶葓D進行二值化處理,使用的方法是threshold()。像素點只有0(黑)或1(白),比灰度圖更加容易對圖像進行特征描述,如圖14所示。
但是二值化后的圖像存在多處大小不一的噪聲點,我們利用尋找圖像的輪廓,對于近似50*50的所有輪廓區(qū)域,使用黑色進行填充,再對最大的輪廓區(qū)域使用白色進行填充,能得到一個明顯的身份證圖形,如圖15所示。
⑶ 輪廓檢測[16-17]:進行完以上步驟后,圖像輪廓清晰,接著使用findContours()方法,獲取到輪廓信息并描繪出矩形輪廓后,用boundingRect()方法獲取輪廓寬度,即可得出身份證在圖像中的寬度大小,如圖16所示。
⑷ 最終通過雙眼之間的像素點、檢測到的矩形輪廓寬度像素點的比例和身份證件照的真實寬度計算出真實瞳距。
4 瞳距測量模塊實現(xiàn)
瞳距測量模塊設(shè)計思路:點擊首頁上的瞳距測量,用戶進入瞳距測量頁面,點擊開啟按鈕打開攝像頭,“放置身份證”區(qū)域為放置身份證的區(qū)域。點擊拍照按鈕進行拍照,用戶在拍照過程保持現(xiàn)場光線明亮,如圖17所示。
拍照之后下方顯示用戶拍攝后得到的瞳孔距離。點擊關(guān)閉,將關(guān)閉攝像頭,如圖18所示。
5 結(jié)束語
本應(yīng)用程序主要基于人臉識別技術(shù),利用OpenCV計算機視覺庫和圖像形態(tài)學(xué)處理技術(shù)實現(xiàn)了瞳距測量的功能,并將其部署在Android平臺上。在開發(fā)過程中,還是存在不足之處,比如在界面設(shè)計上存在欠缺、頁面不夠精美等。接下來的研究方向為頁面的美化以及對瞳距測量的算法進一步的優(yōu)化。
參考文獻(References):
[1] 王建翠,陳育才.基于HTML5技術(shù)的移動Web前端設(shè)計與開發(fā)分析[J].計算機產(chǎn)品與流通,2019.10:25
[2] 陳巖.輕量級響應(yīng)式框架Vue.js應(yīng)用分析[J].中國管理信息化,2018.21:181-183
[3] 呂英華.漸進式JavaScript框架Vue.js的全家桶應(yīng)用[J].電子技術(shù)與軟件工程,2019.22:39-40
[4] 陳倩怡,何軍.Vue+Springboot+MyBatis技術(shù)應(yīng)用解析[J].電腦編程技巧與維護,2020.1:14-15
[5] 王天順,程杰,張志文.MyBatis在《Web中間件技術(shù)》課程中的應(yīng)用[J].教育教學(xué)論壇,2019.38:204-205
[6] 徐孝成.基于Shiro的Web應(yīng)用安全框架的設(shè)計與實現(xiàn)[J].電腦知識與技術(shù),2015.11(16):93-95
[7] 丁潔.基于Shiro的Web應(yīng)用安全框架設(shè)計研究[J].信息與電腦(理論版),2018.13:38-39
[8] 焦鵬琿.基于SpringBoot和Vue框架的電子招投標(biāo)系統(tǒng)的設(shè)計與實現(xiàn)[D].南京大學(xué),2018.
[9] 姜太平,汪小帆,潘祥.一種改進的基于人臉圖像的瞳孔精確檢測方法[J].小型微型計算機系統(tǒng),2018.39(4):842-846
[10] 秦志新.計算機技術(shù)在圖像形態(tài)學(xué)處理中的應(yīng)用探討[J].普洱學(xué)院學(xué)報,2019.35(6):24-26
[11] 陳海峰,丁麗麗.二值化圖像的灰度處理算法研究[J].電腦與電信,2019.7:34-38
[12] 高薪,胡月,杜威等.腐蝕膨脹算法對灰度圖像去噪的應(yīng)用[J].北京印刷學(xué)院學(xué)報,2014.4:63-65
[14] 張瑩.開閉運算在消除圖象噪聲中的應(yīng)用研究[J]. 濰坊學(xué)院學(xué)報,2002.2:65-66
[15] 陳尹剛.基于數(shù)學(xué)形態(tài)學(xué)圖像處理算法研究[J].信息通信,2019.12:67-68
[16] 卜飛宇.一種基于邊緣直線檢測的矩形提取方法[J].電腦知識與技術(shù),2017.13(31):182-184
[17] 吳紹根,聶為清,路利軍等.形狀的圓內(nèi)距離變換[J].中國圖象圖形學(xué)報,2018.261(1):43-55