- 相关推荐
基于HTML5技术的大坝安全监测图像绘制技术
摘要：本文介绍了在大坝安全监测的图形化展示领域中，HTML5技术对比其他技术所具有的优点，并以水情态势图为例，详细介绍了利用HTML5技术在网页上动态绘制相关图形的方法和步骤。文中通过具体的代码示例和图形界面，展示了图像绘制技术、颜色识别技术、碰撞检测技术在工程实践中的具体应用。文章结尾总结了HTML5的技术特点以及在当前环境下的发展前景。
关键词：大坝安全 HTML5 计算机绘图
在大坝安全管理中，大坝安全监测数据的图形化展示一直是一个关注热点，借助图形化展示技术，广大大坝安全管理人员可以快速直观的评估大坝目前的安全状况，并能够根据大坝安全监测数据的变化趋势，对大坝安全状况未来的变化态势做出预测，提前做好相关的准备方案。
当前，基于B/S平台的图形展示技术主要有Flash、Sliverlight以及HTML5等。相比较与前两种技术方案，HTML5技术具有如下优点：
(1)低技术风险。HTML5是HTML的一个新版本。HTML5草案的前身名为Web Applications 1.0。它于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。2012年12月17日，万维网联盟(W3C)正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。而flash技术由Adobe公司所有、Sliverlight技术由Microsoft公司所有，选用这些技术，均会存在一定的技术风险。
(2)免插件安装。由于浏览器本身并不支持flash和Sliverlight，因此要使用flash和Sliverlight，必须要先在浏览器上安装安装相关的插件，由于浏览器安全方面的限制，在浏览器上安装插件往往会出现各种各样的问题，这已经成为影响用户体验的一个重要因素。而现代主流的浏览器均可原生支持HTML5，不用安装插件即可直接使用HTML5技术，这就为广大用户提供了更好的用户体验。
(3)跨平台使用。随着移动技术的发展，现在的B/S系统不仅在普通的PC端上使用，也越来越多的在移动端平台(如手机、平板电脑)上使用。HTML5技术在这些移动平台时拥有良好的兼容性。开发者利用HTML5开发出一套系统后，即可以在Windows平台、iOS平台、Android平台上运行，大大减少了开发成本和移植费用。
(4)开发学习成本较低。HTML5由现有的HTML4发展而来，对于广大的Web开发人员来说，其学习成本较低，能够很快的掌握相关的开发技术。而反观flash和Sliverlight，都要重新学习专门的开发语言，开发与学习的成本都较高。
本文将以水情态势图的绘制方法为例，详细介绍HTML5技术在网页绘图方面的具体应用。
水情态势图主要用于实时反映大坝的上下游水位，以及与正常蓄水位以及死水位之间的对比关系，用户可以通过水情态势图，直观准确的了解大坝的水位情况。绘制水情态势图主要经过了五个主要步骤。(1)加载背景图。(2)确定边界特征颜色值。(3)确定坝顶坝底位置，确定水位与坐标之间的对应关系。(4)绘制上下游水位。(5)标注出正常蓄水位、汛限水位以及死水位。各个步骤的具体介绍如下：
1)水情态势图的绘制必须以大坝的剖面图作为背景，因此，加载剖面图是绘制工作的基础。我们必须首先在html页面中定义一个canvas。
然后我们在javascript中取得这个canvas对象，并在canvas上加载背景图。加载完成后的图形如图1。
2)背景图加载完成后，我们必须识别出背景图中表示大坝边界的特征颜色值，确定该颜色值后，才能确定大坝图形的具体范围。在获取大坝边界的颜色值之前，必要先了解HTML5中图像的存储方式。HTML5使用ImageData对象来保存图像像素值，它有 width、height和 data 三个属性，其中 data 属性就是一个连续数组，图像的所有像素点的信息其实是保存在 data 里面的。每个像素点的信息由四个字节组成。第一个字节决定像素的红色值(r)，第二个字节决定像素的绿色值(g)，第三个字节决定像素的蓝色值(b)，第四个字节决定像素的透明度值(a)。每一种颜色值的大小是从 0 到 255，而对于透明度来说：0 代表完全透明，255代表完全不透明。
因此，我们到取得图片里一个[x，y]坐标像素点的红色值可以用以下公式：
var redValueForPixel = (y * width + x) * 4;
具体到大坝的剖面图上，我们将剖面图放大并打上网格线(如图2)，图中的每一个方格即表示一个像素点，我们可以看到大坝的弧形边框放大后实际上是由锯齿形的像素点组成了，这些像素点颜色深浅不一，每四行像素点可分为一组。我们通过研究一组像素点的data 属性，找出颜色最浅的像素点，并以此点的颜色作为大坝边界的特征颜色值。
我们以图片的中线作为起点，向下取得四行像素点的data属性，然后筛选出所有非空白点的data值。数据如表1。
分析上述表格，我们以218作为大坝边界的特征颜色值。
3)我们从顶部开始，从上往下对图像进行逐行扫描，当遇到颜色比特征颜色深的像素点，即可视为碰到了图像的上边界，这个位置即是图像中大坝的坝顶位置。反之，我们从底部开始，从下往上对图像进行逐行扫描，遇到颜色比特征颜色深的像素点，即可视为碰到了图像的下边界，这个位置即是图像中大坝的坝底位置。
我们通过已有的资料可以得知大坝的坝高和坝顶高程，设大坝的坝高为damHeight，大坝的坝顶高程为damTopElevation，根据大坝高度与其坐标范围之间的线形关系，我们可以得到水位与坐标值之间的转换关系，代码如下：
//根据水位值计算得到坐标位置
//@param level 水位值
//@return 水位值所对应的X坐标
function getPosition(level){
var val = ((damBottomPosition-damTopPosition)*(damTopElevation-level)/damHeight)+damTopPosition;
return parseInt(val);
}
4)我们仍然采用逐行扫描加颜色比对的方式来绘制上下游水位，我们从水位位置开始一直扫描到坝底位置，如果检测到了大坝边界，则绘制一条从该行起点到边界点的线条。绘制上游水位与绘制下游水位的不同之处在于，上游水位是从左往右进行检测，下游水位是从右往左进行检测。绘制上游水位的代码如下：
//开始绘制
ctx.beginPath();
//取得canvas上图像的像素点信息数组
var imagedata=ctx.getImageData(leftPoint，0，image.width，image.height);
//从水位位置到坝底位置进行逐行扫描
for(var j=upWaterLevel;j
for(var i=0;i
//计算像素点信息数组中存放当前像素点r颜色值的位置
k=4*(image.width*j+i);
//取得当前像素点r颜色值
var rcolor = imagedata.data[k];
//当r颜色值比特征颜色值深时
if(rcolor //选定线条的起点
ctx.moveTo(0， j);
//画一条从起点到边界点的直线
ctx.lineTo(leftPoint+i， j);
//跳出当前的循环
break;
}
}
//设置填充颜色
ctx.strokeStyle = "#C4E1F7";
//结束绘制
ctx.closePath();
//填充颜色
ctx.stroke();
绘制完水面后，我们还需要在水位处绘制一条水位线。
//开始绘制
ctx.beginPath();
//在上游水位处从左向右扫描
for(var i=0;i //计算像素点信息数组中存放当前像素点r颜色值的位置
k=4*(image.width*upWaterLevel+i);
//取得当前像素点r颜色值
var rcolor = imagedata.data[k];
//当r颜色值比特征颜色值深时
if(rcolor //选定线条的起点
ctx.moveTo(0， upWaterLevel);
//画一条从起点到边界点的直线
ctx.lineTo(leftPoint+i， upWaterLevel);
//跳出当前的循环
break;
//设置填充颜色
ctx.strokeStyle = "blue";
//结束绘制
ctx.closePath();
//填充颜色
ctx.stroke();
我们还需要在水位线上用文字和符号对水位情况进行说明。
//开始绘制
ctx.beginPath();
//绘制一个倒三角符号来指示当前水位，signMargin表示符号到边框的距离，signSize表示符号的大小，即倒三角的边长
ctx.moveTo(signMargin，upWaterLevel);
ctx.lineTo(signMargin-signSize*0.5，upWaterLevel-signSize*0.866);
ctx.lineTo(signMargin+signSize*0.5，upWaterLevel-signSize*0.866);
//设置填充颜色
ctx.strokeStyle = "blue";
//结束绘制
ctx.closePath();
//填充颜色
ctx.stroke();
//设置当前文本基线
ctx.textBaseline = "top";
//设置文字颜色
ctx.fillStyle = "blue";
//设置文字对齐方式
ctx.textAlign = "left";
//设置文字字体
ctx.font = "14px Microsoft YaHei";
//绘制文字
ctx.fillText(up+"m"， signMargin+signSize，upWaterLevel-signSize);
绘制后的图形如图3。
5)最后，我们在画图上标注出正常蓄水位、汛限水位以及死水位。这样，用户在查看水情态势时可以进行对比分析。正常蓄水位、汛限水位以及死水位的标注方法与上下游水位线的绘制方法类似，只是对线条的长度以及文字符号的位置做了改动，以便达到画面更加美观的目的。
最后完成的图形如图4。
以上介绍了HTML5在绘制水情态势图时的应用，实际上，HTML5也可用于在大坝安全管理相关的很多其他图形表示上，如分布图，过程线等，借助HTML5技术的特性，我们可以真正实现“One Web，Any Device”，即我们编写出一套网页程序就可以运行在各种终端之上。这在移动设备越来越发挥重要作用的今天无疑具有重要意义。
参考文献：
[1] 蒋海洲，吴中如.ADO技术在大坝安全监测中的应用[J].水电能源科学，2002(02).
[2] 崔玉兰，郭治清.全国水文自动测报系统建设评价[J].水文，2002(01).
【基于HTML5技术的大坝安全监测图像绘制技术】相关文章：
基于图像的OMR技术的实现03-07
水库大坝安全监测自动化技术探究论文11-14
基于内容的模糊图像检索技术研究03-18
基于图像处理技术的织物组织自动识别03-07
基于Zigbee的无线传感器网络在大坝安全监测系统中的应用03-07
基于FPGA/CPLD和USB技术的无损图像采集卡03-18
基于BSTR1011码流收发卡的监测技术11-22
基于探针与NetFlow的高速网络流量监测技术的研究与实现03-07
探讨水库大坝防渗加固技术11-25