基于HTML5技術的大壩安全監測圖像繪制技術

基于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