基于HTML5的大田數(shù)據(jù)采集與傳輸系統(tǒng)的構(gòu)建及應(yīng)用

翁 梅，劉明明，尹紅征(河南農(nóng)業(yè)大學(xué) 信息與管理科學(xué)學(xué)院，河南 鄭州 450046)

基于HTML5的大田數(shù)據(jù)采集與傳輸系統(tǒng)的構(gòu)建及應(yīng)用

翁 梅，劉明明，尹紅征
(河南農(nóng)業(yè)大學(xué) 信息與管理科學(xué)學(xué)院，河南 鄭州 450046)

一直以來，葉面圖像等大田信息的采集主要依靠研究人員攜帶專業(yè)的設(shè)備來完成，出于降低成本和增大樣本量的需求，便攜式農(nóng)業(yè)專家系統(tǒng)及其輔助系統(tǒng)的研究成為熱點(diǎn)課題。為此，設(shè)計(jì)了一個基于B/S架構(gòu)的數(shù)據(jù)采集與傳輸系統(tǒng)，其通過具有跨平臺特性的HTML5技術(shù),采集包括葉面照片、時間、位置在內(nèi)的綜合信息，并在手機(jī)端進(jìn)行基于優(yōu)化Otsu算法的圖像切割處理，實(shí)現(xiàn)了高分辨率圖像的無線傳輸，使采集到的信息成為農(nóng)業(yè)專家系統(tǒng)的數(shù)據(jù)源。試驗(yàn)數(shù)據(jù)表明，該系統(tǒng)能夠有效壓縮采集的大田數(shù)據(jù)并增加傳送效率。

HTML5； 農(nóng)業(yè)專家系統(tǒng)； 手機(jī)； Otsu算法； 數(shù)據(jù)采集

作為農(nóng)業(yè)專家系統(tǒng)的重要組成部分，葉面圖像處理在病蟲害防治、施肥指導(dǎo)、精準(zhǔn)農(nóng)業(yè)方面有重要應(yīng)用[1-2]。如何快速、方便、大范圍地采集農(nóng)業(yè)圖像數(shù)據(jù)是各個農(nóng)業(yè)專家系統(tǒng)面臨的共同問題，20世紀(jì)80年代以來,一些發(fā)達(dá)國家開展了基于GPS(全球衛(wèi)星定位系統(tǒng))的農(nóng)業(yè)信息采集系統(tǒng),如Trimble公司的Ag系列[3]，國內(nèi)有基于 Windows CE的PDA等嵌入式設(shè)備在農(nóng)業(yè)專家系統(tǒng)中的應(yīng)用研究。綜合國內(nèi)外的研究成果發(fā)現(xiàn)，農(nóng)業(yè)專家系統(tǒng)中的采集設(shè)備普遍具有專業(yè)化程度高、成本高且操作復(fù)雜的特性，一般由相關(guān)研究人員保管和使用。因此，通過軟件將符合采集和傳輸要求的手機(jī)改造為農(nóng)業(yè)專家系統(tǒng)的終端，具有較高的研究和應(yīng)用價值。而隨著手機(jī)性能的提升以及3G和4G網(wǎng)絡(luò)的普遍應(yīng)用，手機(jī)已經(jīng)具備了取代部分傳統(tǒng)設(shè)備進(jìn)行數(shù)據(jù)采集并實(shí)時傳輸?shù)墓δ埽悦媾R高分辨率圖像傳輸成本高的問題。基于Otsu算法將圖像在手機(jī)端進(jìn)行切割，去除背景等無用數(shù)據(jù)，既能壓縮圖像體積，又能保留葉面細(xì)節(jié)，使通過移動通信網(wǎng)傳輸高分辨率圖像更具可行性[4]。為此，介紹了HTML5開發(fā)平臺特性、Otsu算法的改進(jìn)思路和在移動端的編程方案，設(shè)計(jì)了一個大田數(shù)據(jù)采集與傳輸系統(tǒng)，并通過實(shí)例驗(yàn)證該系統(tǒng)的應(yīng)用效果，使智能手機(jī)采集到的信息成為農(nóng)業(yè)專家系統(tǒng)的數(shù)據(jù)源。

1 系統(tǒng)設(shè)計(jì)與技術(shù)實(shí)現(xiàn)

1.1 HTML5技術(shù)特點(diǎn)

HTML5是HTML語言的第5次重大修改，指一系列用于開發(fā)網(wǎng)絡(luò)應(yīng)用的最新技術(shù)的集合，它包括 HTML、CSS3(層疊樣式表)、JavaScript 以及一系列全新的 API。 在移動終端使用的HTML5平臺包括了HTML5本身和配套標(biāo)準(zhǔn)及技術(shù)，包括AJAX(異步JavaScript和XML)和JSON(JavaScript 對象表示法)等相關(guān)標(biāo)準(zhǔn)，還有其他一些非專有標(biāo)準(zhǔn)，如XML 和 XHTML。 HTML5及配套標(biāo)準(zhǔn)不僅強(qiáng)化了Web網(wǎng)頁的表現(xiàn)性能，而且增加了本地存儲等 Web 應(yīng)用的功能[5]。在手機(jī)端可以通過API調(diào)取手機(jī)硬件信息，讓HTML5應(yīng)用具有原生應(yīng)用的某些特性。

1.2 流程設(shè)計(jì)

基于HTML5的移動數(shù)據(jù)采集系統(tǒng)旨在用手機(jī)替代傳統(tǒng)農(nóng)業(yè)專家系統(tǒng)中的專業(yè)采集設(shè)備，通過瀏覽器獲取手機(jī)硬件采集的包括GPS信息、圖片、時間信息在內(nèi)的數(shù)據(jù)，通過Otsu算法設(shè)計(jì)編程，對采集的圖片進(jìn)行處理，并通過移動網(wǎng)絡(luò)傳輸?shù)睫r(nóng)業(yè)專家系統(tǒng)進(jìn)行分析。其數(shù)據(jù)傳輸流程如圖1所示。

圖1 系統(tǒng)數(shù)據(jù)傳輸流程

1.3 GPS信息采集

Geolocation API的位置信息來源包括IP地址、GPS、WIFI和藍(lán)牙的MAC地址以及GSM/CDMS的ID等。手機(jī)等移動設(shè)備優(yōu)先使用GPS定位，Geolocation API屏蔽了系統(tǒng)獲取位置信息的過程，直接將結(jié)果呈現(xiàn)給應(yīng)用。位置信息以經(jīng)緯度的形式表達(dá)。經(jīng)過測試，該接口也能夠獲取采用國產(chǎn)最新北斗衛(wèi)星定位系統(tǒng)設(shè)備的位置信息。在用戶點(diǎn)擊提交按鈕時，會同其他信息一起發(fā)送到農(nóng)業(yè)專家系統(tǒng)，并形成對應(yīng)關(guān)系[6]。

1.4 攝像頭的調(diào)取

通過getUserMedia調(diào)用設(shè)備的攝像頭并將資源放入Video標(biāo)簽。將Video內(nèi)的視頻資源通過drawImage API放入Canvas，此時Video元素作為Canvas圖像的輸入。Canvas實(shí)時捕獲Video標(biāo)簽的內(nèi)容，在觸發(fā)拍照操作后通過toDataURL將Canvas的數(shù)據(jù)轉(zhuǎn)換為base64位編碼的PNG圖像。該圖像會被暫時存儲于手機(jī)內(nèi)存中。

2 基于改進(jìn)型Otsu算法分割圖像的編程設(shè)計(jì)

2.1 Otsu算法在移動端的應(yīng)用

Otsu算法是一種計(jì)算灰度圖最優(yōu)閾值的算法，即通過計(jì)算方差尋找一個合適的灰度級別進(jìn)行劃分?？紤]到要采集的大田葉面圖像以綠色為主，本研究對算法進(jìn)行了優(yōu)化改進(jìn)，主要體現(xiàn)在將彩色圖轉(zhuǎn)化為灰度圖的過程中，加大了圖像中綠色像素的權(quán)重，去除暗部畫面，最大限度保留綠葉部分的細(xì)節(jié)并剔除無用數(shù)據(jù)。該算法不受圖像對比度和亮度的影響，邏輯清晰且消耗CPU資源少，在此基礎(chǔ)上進(jìn)行優(yōu)化設(shè)計(jì)，是在手機(jī)中實(shí)現(xiàn)圖像分割的可行方案。經(jīng)過探索，在本研究所述的系統(tǒng)中實(shí)現(xiàn)了通過HTML5語言編程，對圖像分割并得到圖像中葉面的部分[7]。與傳統(tǒng)傳輸方案相比，該系統(tǒng)將去除背景的操作前置到用戶手機(jī)中來完成，可以顯著減少數(shù)據(jù)傳輸量，對于在野外使用移動通信網(wǎng)絡(luò)進(jìn)行數(shù)據(jù)傳輸?shù)南到y(tǒng)具有重要意義。

2.2 JavaScript程序設(shè)計(jì)

(1)獲取圖片信息。圖形處理的第一步通常是遍歷圖像上所有的像素點(diǎn)，而HTML5技術(shù)規(guī)范包含有g(shù)etImageData API，用于獲取圖像上所有的像素信息。該API提取每個像素點(diǎn)的三原色和透明度，存儲在數(shù)組ImageData中，數(shù)組中的值依次對應(yīng)為red、green、blue、alpha，并將ImageData數(shù)組返回到系統(tǒng)以備使用。

(2)對圖像進(jìn)行灰度處理。對于每一個像素點(diǎn)，定義R為紅色、G為綠色、B為藍(lán)色、Gray為灰色。分析數(shù)組ImageData中RGB的值，如果G>1.2×R且G>1.2×B，則該點(diǎn)為綠色基調(diào)，應(yīng)加以保留。其余點(diǎn)采用加權(quán)平均法將RGB色彩的像素轉(zhuǎn)化為灰度像素，將綠色權(quán)重系數(shù)調(diào)低以便在Otsu算法中保留青黃基調(diào)像素，同時考慮到作物及病蟲害極少有藍(lán)色性狀表現(xiàn)，在此算法中增大了藍(lán)色權(quán)重系數(shù)[8]。經(jīng)多次調(diào)試，獲得了較為滿意的權(quán)值設(shè)定，設(shè)Gray=R×0.199+G×0.014+B×0.787,然后將灰度值Gray通過putImageData API寫入到圖像。遍歷結(jié)束后，灰度圖就存儲于內(nèi)存中。

(3)對灰度圖進(jìn)行直方圖計(jì)算并做歸一化處理。設(shè)圖像包含L個灰度級(0,1，…,L-1)，灰度值為i的像素點(diǎn)數(shù)為Ni，圖像總的像素點(diǎn)數(shù)為N=N0+N1+…+N(L-1)，灰度值為i的點(diǎn)的概率為：P(i)=N(i)/N。由此算法遍歷整幅灰度圖，遍歷結(jié)束后得到0～255所有像素在灰度圖中出現(xiàn)的概率，P(i)值記錄在內(nèi)存中以備使用。

(4)找出分割圖像的最佳閥值。設(shè)閾值t將灰度圖分為A、B兩大類，A類點(diǎn)占圖像比例為m0，平均灰度值為n0；B類點(diǎn)占圖像比例為m1，平均灰度值為n1；整幅圖像的平均灰度值為n。建立目標(biāo)函數(shù)g(t)=m0×(n0-n)2+m1×(n1-n)2，g(t)是當(dāng)分割閾值為t時的類間方差表達(dá)式。當(dāng)g(t)的值最大時，所對應(yīng)的t稱為最佳閾值。

(5)分割圖像。由最佳閥值t將圖像分為兩部分，表現(xiàn)在圖像上是暗區(qū)和亮區(qū)，傳統(tǒng)Otsu算法分割圖像的效果如圖2b所示，由于本研究使用的算法中增大了綠色像素點(diǎn)的權(quán)重，所以作物的綠色葉面得到較為完整的保留，切割出的二值圖如圖2c所示。遍歷灰度圖的所有像素點(diǎn)并與閥值進(jìn)行比較，如果大于閥值，將像素點(diǎn)的值設(shè)為0，否則用原始圖像相應(yīng)位置的像素值覆蓋掉灰度圖中的值。至此，內(nèi)存中的灰度圖已經(jīng)轉(zhuǎn)化為黑底的彩色葉面圖[9]，效果如圖2d所示。

a.原始圖; b.傳統(tǒng)Otsu算法得到的二值圖; c.改進(jìn)Otsu算法得到的二值圖; d.改進(jìn)Otsu算法切割效果圖

3 實(shí)例分析

3.1 試驗(yàn)結(jié)果

在自然光照條件下對花生、小麥、青梗菜、玉米的葉片進(jìn)行拍照作為試驗(yàn)數(shù)據(jù)源，如圖3所示，經(jīng)本系統(tǒng)處理所得圖像如圖4所示。將處理前后的圖片大小記錄在表1中,經(jīng)過分析計(jì)算，該系統(tǒng)對綠色植物葉片圖像的壓縮率約為46.4%，對比傳統(tǒng)的圖片壓縮方法，這種通過去除背景實(shí)現(xiàn)壓縮的方式，對圖片中的葉片部分來說是無損的，更加有利于識別工作。

從左至右依次為花生、小麥、青梗菜、玉米，下圖同圖3 作物葉面原始圖像

圖4 改進(jìn)Otsu算法處理后的作物葉面圖像

表1 圖片處理前后的數(shù)據(jù)對比 kB

3.2 系統(tǒng)優(yōu)缺點(diǎn)

隨著研究的不斷深入，基于HTML5的相關(guān)標(biāo)準(zhǔn)已經(jīng)實(shí)現(xiàn)了較為復(fù)雜的編程應(yīng)用，而且有進(jìn)一步挖掘的空間。其具有獨(dú)特的跨平臺特性，與移動互聯(lián)網(wǎng)的天然結(jié)合生成的應(yīng)用基于B/S架構(gòu)，在后期升級系統(tǒng)或優(yōu)化算法的過程中不會付出升級成本。此外，該系統(tǒng)無須采購、定制硬件設(shè)備，相比傳統(tǒng)農(nóng)業(yè)專家系統(tǒng)，以智能手機(jī)為采集設(shè)備的農(nóng)業(yè)系統(tǒng)極其靈活，具有廣泛的硬件基礎(chǔ)和較高的設(shè)備持有率。結(jié)合改進(jìn)的Otsu算法，這一系統(tǒng)具備更高的實(shí)用性。

該算法支持切割綠色葉面的圖片，如應(yīng)用于其他顏色的作物，如番茄、南瓜、彩椒等，需改變或增加參數(shù)。其次，基于HTML5的算法編程在效率上沒有原生軟件高。

4 小結(jié)與展望

隨著手機(jī)性能日益強(qiáng)大，集成的功能逐漸增多，手機(jī)已經(jīng)具備取代部分專業(yè)化設(shè)備的能力?；贖TML5的WEB應(yīng)用運(yùn)行在手機(jī)瀏覽器上，具有“一個網(wǎng)址就是一個應(yīng)用”的特點(diǎn)，能夠嵌入到微信、微博等第三方平臺上運(yùn)行，與原生APP相比具有較高的靈活性，易于維護(hù)和推廣[10]。本研究設(shè)計(jì)的基于HTML5的大田數(shù)據(jù)采集與傳輸系統(tǒng)，正是這個大背景下對手機(jī)取代傳統(tǒng)設(shè)備的部分功能，并應(yīng)用在農(nóng)業(yè)專家系統(tǒng)中的一次探索。該系統(tǒng)使用HTML5技術(shù)將手機(jī)拓展為采集大田圖像數(shù)據(jù)的設(shè)備，節(jié)約了研發(fā)手持設(shè)備的成本；通過移動通信網(wǎng)絡(luò)將數(shù)據(jù)即時傳輸?shù)睫r(nóng)業(yè)專家系統(tǒng)中，具有較高的時效性；可以讓智能手機(jī)持有者參與到采集大田數(shù)據(jù)的活動中，增加了農(nóng)業(yè)專家系統(tǒng)的數(shù)據(jù)來源。

[1] 張紅濤,田媛,孫志勇,等.基于近紅外高光譜圖像分析的麥粒硬度分類研究[J].河南農(nóng)業(yè)科學(xué),2015,44(4):181-184.

[2] 劉麗娟,劉仲鵬,程芳.玉米生長期葉部病害圖像識別預(yù)處理研究[J].河南農(nóng)業(yè)科學(xué),2013,42(10):91-94.

[3] 劉卉.基于GPS技術(shù)的農(nóng)田信息采集系統(tǒng)的現(xiàn)狀及展望[J].全球定位系統(tǒng),2002,27(5):33-36.

[4] Grgic S,Grgic M,Zovko-Cihlar B.Performance analysis of image compression using wavelets[J].IEEE Transactions on Industrial Electronics,2001,48(3):682-695.

[5] Boulos M N K,Warren J,Gong J,etal.Web GIS in practice Ⅷ:HTML5 and the canvas element for interactive online mapping[J].International Journal of Health Geographics,2010,9(6):1-13.

[6] 易曉飛.HTML5 Geolocation API研究與應(yīng)用[J].計(jì)算機(jī)光盤軟件與應(yīng)用,2012(6):153-154.

[7] 胡敏,李梅,汪榮貴.改進(jìn)的Otsu算法在圖像分割中的應(yīng)用[J].電子測量與儀器學(xué)報,2010,24(5):443-449.

[8] 范九倫,趙鳳.灰度圖像的二維Otsu曲線閾值分割法[J].電子學(xué)報,2007,35(4):751-755.

[9] 朱俊杰,杜小平,范湘濤,等.三種圖像分割算法的對比及圖像分割方法的改進(jìn)[J].計(jì)算機(jī)應(yīng)用與軟件,2014(1):194-196.

[10] 彭濤,楊煉.基于移動瀏覽器的HTML5核心技術(shù)的研究及其應(yīng)用[J].廣東通信技術(shù),2012,32(4):47-50.

Construction and Application of Field Data Acquisition and Transmission System Based on HTML5

WENG Mei,LIU Mingming,YIN Hongzheng
(College of Information and Management Science,Henan Agricultural University，Zhengzhou 450046，China)

For a long time,the collection of field information such as leaf image mainly depends on the researchers who carry the professional equipments.To reduce the cost and increase the sample size,the research of portable agricultural expert system and its auxiliary system has become a hot topic.The data acquisition and transmission system designed in this paper was based on B/S architecture，which used the HTML5 technology having cross platform characteristics to collect information such as leaf image,time,location and so on.Image was processed based on optimized Otsu algorithm on mobile phone,and the wireless transmission of the high resolution image was realized,which made the information collected as the data source of the agricultural expert system.The experimental data showed that the system could effectively compress the field data and increase the transmission efficiency.

HTML5; agricultural expert system; mobile phone; Otsu algorithm; data acquisition

2016-04-26

河南省科技計(jì)劃項(xiàng)目(0624050020)；河南省自然科學(xué)基金項(xiàng)目(2011B5200l9)

翁 梅(1959-)，女，福建廈門人，教授，主要從事信息技術(shù)研究與教學(xué)工作。E-mail：wengm@163.com

TP274+.2；S126

A

1004-3268(2016)09-0169-04