基于HTML5的大田数据采集与传输系统的构建及应用

翁 梅，刘明明，尹红征(河南农业大学 信息与管理科学学院，河南 郑州 450046)

基于HTML5的大田数据采集与传输系统的构建及应用

翁 梅，刘明明，尹红征
(河南农业大学 信息与管理科学学院，河南 郑州 450046)

一直以来，叶面图像等大田信息的采集主要依靠研究人员携带专业的设备来完成，出于降低成本和增大样本量的需求，便携式农业专家系统及其辅助系统的研究成为热点课题。为此，设计了一个基于B/S架构的数据采集与传输系统，其通过具有跨平台特性的HTML5技术,采集包括叶面照片、时间、位置在内的综合信息，并在手机端进行基于优化Otsu算法的图像切割处理，实现了高分辨率图像的无线传输，使采集到的信息成为农业专家系统的数据源。试验数据表明，该系统能够有效压缩采集的大田数据并增加传送效率。

HTML5； 农业专家系统； 手机； Otsu算法； 数据采集

作为农业专家系统的重要组成部分，叶面图像处理在病虫害防治、施肥指导、精准农业方面有重要应用[1-2]。如何快速、方便、大范围地采集农业图像数据是各个农业专家系统面临的共同问题，20世纪80年代以来,一些发达国家开展了基于GPS(全球卫星定位系统)的农业信息采集系统,如Trimble公司的Ag系列[3]，国内有基于 Windows CE的PDA等嵌入式设备在农业专家系统中的应用研究。综合国内外的研究成果发现，农业专家系统中的采集设备普遍具有专业化程度高、成本高且操作复杂的特性，一般由相关研究人员保管和使用。因此，通过软件将符合采集和传输要求的手机改造为农业专家系统的终端，具有较高的研究和应用价值。而随着手机性能的提升以及3G和4G网络的普遍应用，手机已经具备了取代部分传统设备进行数据采集并实时传输的功能，但仍面临高分辨率图像传输成本高的问题。基于Otsu算法将图像在手机端进行切割，去除背景等无用数据，既能压缩图像体积，又能保留叶面细节，使通过移动通信网传输高分辨率图像更具可行性[4]。为此，介绍了HTML5开发平台特性、Otsu算法的改进思路和在移动端的编程方案，设计了一个大田数据采集与传输系统，并通过实例验证该系统的应用效果，使智能手机采集到的信息成为农业专家系统的数据源。

1 系统设计与技术实现

1.1 HTML5技术特点

HTML5是HTML语言的第5次重大修改，指一系列用于开发网络应用的最新技术的集合，它包括 HTML、CSS3(层叠样式表)、JavaScript 以及一系列全新的 API。 在移动终端使用的HTML5平台包括了HTML5本身和配套标准及技术，包括AJAX(异步JavaScript和XML)和JSON(JavaScript 对象表示法)等相关标准，还有其他一些非专有标准，如XML 和 XHTML。 HTML5及配套标准不仅强化了Web网页的表现性能，而且增加了本地存储等 Web 应用的功能[5]。在手机端可以通过API调取手机硬件信息，让HTML5应用具有原生应用的某些特性。

1.2 流程设计

基于HTML5的移动数据采集系统旨在用手机替代传统农业专家系统中的专业采集设备，通过浏览器获取手机硬件采集的包括GPS信息、图片、时间信息在内的数据，通过Otsu算法设计编程，对采集的图片进行处理，并通过移动网络传输到农业专家系统进行分析。其数据传输流程如图1所示。

图1 系统数据传输流程

1.3 GPS信息采集

Geolocation API的位置信息来源包括IP地址、GPS、WIFI和蓝牙的MAC地址以及GSM/CDMS的ID等。手机等移动设备优先使用GPS定位，Geolocation API屏蔽了系统获取位置信息的过程，直接将结果呈现给应用。位置信息以经纬度的形式表达。经过测试，该接口也能够获取采用国产最新北斗卫星定位系统设备的位置信息。在用户点击提交按钮时，会同其他信息一起发送到农业专家系统，并形成对应关系[6]。

1.4 摄像头的调取

通过getUserMedia调用设备的摄像头并将资源放入Video标签。将Video内的视频资源通过drawImage API放入Canvas，此时Video元素作为Canvas图像的输入。Canvas实时捕获Video标签的内容，在触发拍照操作后通过toDataURL将Canvas的数据转换为base64位编码的PNG图像。该图像会被暂时存储于手机内存中。

2 基于改进型Otsu算法分割图像的编程设计

2.1 Otsu算法在移动端的应用

Otsu算法是一种计算灰度图最优阈值的算法，即通过计算方差寻找一个合适的灰度级别进行划分。考虑到要采集的大田叶面图像以绿色为主，本研究对算法进行了优化改进，主要体现在将彩色图转化为灰度图的过程中，加大了图像中绿色像素的权重，去除暗部画面，最大限度保留绿叶部分的细节并剔除无用数据。该算法不受图像对比度和亮度的影响，逻辑清晰且消耗CPU资源少，在此基础上进行优化设计，是在手机中实现图像分割的可行方案。经过探索，在本研究所述的系统中实现了通过HTML5语言编程，对图像分割并得到图像中叶面的部分[7]。与传统传输方案相比，该系统将去除背景的操作前置到用户手机中来完成，可以显著减少数据传输量，对于在野外使用移动通信网络进行数据传输的系统具有重要意义。

2.2 JavaScript程序设计

(1)获取图片信息。图形处理的第一步通常是遍历图像上所有的像素点，而HTML5技术规范包含有getImageData API，用于获取图像上所有的像素信息。该API提取每个像素点的三原色和透明度，存储在数组ImageData中，数组中的值依次对应为red、green、blue、alpha，并将ImageData数组返回到系统以备使用。

(2)对图像进行灰度处理。对于每一个像素点，定义R为红色、G为绿色、B为蓝色、Gray为灰色。分析数组ImageData中RGB的值，如果G>1.2×R且G>1.2×B，则该点为绿色基调，应加以保留。其余点采用加权平均法将RGB色彩的像素转化为灰度像素，将绿色权重系数调低以便在Otsu算法中保留青黄基调像素，同时考虑到作物及病虫害极少有蓝色性状表现，在此算法中增大了蓝色权重系数[8]。经多次调试，获得了较为满意的权值设定，设Gray=R×0.199+G×0.014+B×0.787,然后将灰度值Gray通过putImageData API写入到图像。遍历结束后，灰度图就存储于内存中。

(3)对灰度图进行直方图计算并做归一化处理。设图像包含L个灰度级(0,1，…,L-1)，灰度值为i的像素点数为Ni，图像总的像素点数为N=N0+N1+…+N(L-1)，灰度值为i的点的概率为：P(i)=N(i)/N。由此算法遍历整幅灰度图，遍历结束后得到0～255所有像素在灰度图中出现的概率，P(i)值记录在内存中以备使用。

(4)找出分割图像的最佳阀值。设阈值t将灰度图分为A、B两大类，A类点占图像比例为m0，平均灰度值为n0；B类点占图像比例为m1，平均灰度值为n1；整幅图像的平均灰度值为n。建立目标函数g(t)=m0×(n0-n)2+m1×(n1-n)2，g(t)是当分割阈值为t时的类间方差表达式。当g(t)的值最大时，所对应的t称为最佳阈值。

(5)分割图像。由最佳阀值t将图像分为两部分，表现在图像上是暗区和亮区，传统Otsu算法分割图像的效果如图2b所示，由于本研究使用的算法中增大了绿色像素点的权重，所以作物的绿色叶面得到较为完整的保留，切割出的二值图如图2c所示。遍历灰度图的所有像素点并与阀值进行比较，如果大于阀值，将像素点的值设为0，否则用原始图像相应位置的像素值覆盖掉灰度图中的值。至此，内存中的灰度图已经转化为黑底的彩色叶面图[9]，效果如图2d所示。

a.原始图; b.传统Otsu算法得到的二值图; c.改进Otsu算法得到的二值图; d.改进Otsu算法切割效果图

3 实例分析

3.1 试验结果

在自然光照条件下对花生、小麦、青梗菜、玉米的叶片进行拍照作为试验数据源，如图3所示，经本系统处理所得图像如图4所示。将处理前后的图片大小记录在表1中,经过分析计算，该系统对绿色植物叶片图像的压缩率约为46.4%，对比传统的图片压缩方法，这种通过去除背景实现压缩的方式，对图片中的叶片部分来说是无损的，更加有利于识别工作。

从左至右依次为花生、小麦、青梗菜、玉米，下图同图3 作物叶面原始图像

图4 改进Otsu算法处理后的作物叶面图像

表1 图片处理前后的数据对比 kB

3.2 系统优缺点

随着研究的不断深入，基于HTML5的相关标准已经实现了较为复杂的编程应用，而且有进一步挖掘的空间。其具有独特的跨平台特性，与移动互联网的天然结合生成的应用基于B/S架构，在后期升级系统或优化算法的过程中不会付出升级成本。此外，该系统无须采购、定制硬件设备，相比传统农业专家系统，以智能手机为采集设备的农业系统极其灵活，具有广泛的硬件基础和较高的设备持有率。结合改进的Otsu算法，这一系统具备更高的实用性。

该算法支持切割绿色叶面的图片，如应用于其他颜色的作物，如番茄、南瓜、彩椒等，需改变或增加参数。其次，基于HTML5的算法编程在效率上没有原生软件高。

4 小结与展望

随着手机性能日益强大，集成的功能逐渐增多，手机已经具备取代部分专业化设备的能力。基于HTML5的WEB应用运行在手机浏览器上，具有“一个网址就是一个应用”的特点，能够嵌入到微信、微博等第三方平台上运行，与原生APP相比具有较高的灵活性，易于维护和推广[10]。本研究设计的基于HTML5的大田数据采集与传输系统，正是这个大背景下对手机取代传统设备的部分功能，并应用在农业专家系统中的一次探索。该系统使用HTML5技术将手机拓展为采集大田图像数据的设备，节约了研发手持设备的成本；通过移动通信网络将数据即时传输到农业专家系统中，具有较高的时效性；可以让智能手机持有者参与到采集大田数据的活动中，增加了农业专家系统的数据来源。

[1] 张红涛,田媛,孙志勇,等.基于近红外高光谱图像分析的麦粒硬度分类研究[J].河南农业科学,2015,44(4):181-184.

[2] 刘丽娟,刘仲鹏,程芳.玉米生长期叶部病害图像识别预处理研究[J].河南农业科学,2013,42(10):91-94.

[3] 刘卉.基于GPS技术的农田信息采集系统的现状及展望[J].全球定位系统,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研究与应用[J].计算机光盘软件与应用,2012(6):153-154.

[7] 胡敏,李梅,汪荣贵.改进的Otsu算法在图像分割中的应用[J].电子测量与仪器学报,2010,24(5):443-449.

[8] 范九伦,赵凤.灰度图像的二维Otsu曲线阈值分割法[J].电子学报,2007,35(4):751-755.

[9] 朱俊杰,杜小平,范湘涛,等.三种图像分割算法的对比及图像分割方法的改进[J].计算机应用与软件,2014(1):194-196.

[10] 彭涛,杨炼.基于移动浏览器的HTML5核心技术的研究及其应用[J].广东通信技术,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

河南省科技计划项目(0624050020)；河南省自然科学基金项目(2011B5200l9)

翁 梅(1959-)，女，福建厦门人，教授，主要从事信息技术研究与教学工作。E-mail：wengm@163.com

TP274+.2；S126

A

1004-3268(2016)09-0169-04