基于Canvas的貨車圖像瀏覽及增強系統設計與實現*

高斯文，卿粼波，熊淑華，張余強

(1. 四川大學 電子信息學院，四川 成都 610064； 2. 成都西圖科技有限公司，四川 成都 610065)

0 引言

隨著我國鐵路事業的飛速發展以及對鐵路運營高效的需求，貨運列車運行故障動態檢測系統(Trouble of moving Freight car Detection System, TFDS)已經得到了廣泛應用，實現了從傳統的由人工室外手錘檢查向室內圖像分析模式的轉變[1]。貨車圖像在線瀏覽系統不受外界環境因素影響，對貨車車輛實行“全天候”檢測，為車輛安全防范提供了重要保證。但隨著貨車圖像復雜度的增加以及列檢作業人員對圖像人工交互部分的要求日益增多，現有的貨車圖像在線瀏覽系統并不能很好地滿足用戶的需求。

本文針對現有貨車圖像在線瀏覽系統的特點及不足，設計了一種B/S架構下基于HTML5 Canvas技術的貨車圖像在線瀏覽及增強系統，為列檢作業人員節約了檢測時間、降低了誤檢概率，保證了鐵路運營高效、安全地運行，具有重要的實際應用價值。

1 需求分析及方案設計

傳統的貨車圖像在線瀏覽系統采用依賴于ActiveX控件的C/S架構進行設計，用戶需要下載、安裝相應的插件才能使用，增加了系統使用的操作難度。而ActiveX控件本身存在的易卡頓、穩定性差、不能跨平臺等弊端，不僅降低了系統實用性和用戶體驗，同時也增加了運維工作，進而影響列檢員復檢圖片的效率。此外，傳統的貨車圖像在線瀏覽系統只能對從數據中心返回的圖片進行查看，無法根據實際需求對其進行相應的增強。一旦返回的圖片對比度較低、細節不明顯，列檢員很難對故障作出準確的判斷。

考慮到免插件安裝及穩定性，本系統采用B/S的架構。基于此架構下的貨車圖像在線瀏覽系統，除了要實現基本的貨車數據查詢及圖像瀏覽功能外，還需要具備更好的交互性和可擴展性，能夠實現對對比度較低圖片的在線圖像增強功能和對問題圖片的人工復檢功能。

考慮到傳統的貨車圖像在線瀏覽系統應有的基本功能[2]以及目前新增的需求，本文設計的系統包含貨車數據瀏覽、貨車圖像瀏覽、在線圖像增強、列檢員復檢4個模塊，其組成結構如圖1所示。

圖1 系統組成結構

其中貨車數據瀏覽模塊實現對過往貨車日期、時間、車號、方向、總輛數、行車方向、平均速度等數據的展示；貨車圖像瀏覽模塊實現對原始車輛圖像的展示；在線圖像增強模塊實現對對比度較低的圖像進行實時的在線增強；列檢員復檢模塊實現對故障圖像的人工確認檢查。

2 系統設計

2.1 貨車信息瀏覽功能設計

由于貨車數據信息在數據庫中以若干實體字段的格式進行存儲，因此文本信息采用表格的方式進行展現。目前主流的jqGrid框架，相比傳統的Easy UI、jQuery UI等框架，具有性能優良、功能豐富、界面美觀等優勢，能夠滿足系統對貨車過車文本數據展示的需求，而且對主流的瀏覽器有很好的兼容性[3]，所以本系統采用jqGrid框架進行開發。

系統在前端JSP頁面中完成對jqGrid框架的基本配置，并通過異步請求的方式獲取表格的數據。請求過程中將當前的頁碼、每頁顯示的數據條數等必要參數傳遞給后臺，以實現分頁查詢，減緩數據庫的壓力，后端通過處理請求信息在數據庫中檢索數據，返回JSON字符串，最后前端將返回的字符串綁定到表格節點上，完成信息的渲染展示。系統工作流程如圖2所示。

圖2 系統工作流程圖

除了文本信息以外，每列貨車還伴隨著大量的圖片信息需要進行展示。圖片展示采用Viewer.js這款強大的圖片查看器，它支持響應式的布局、圖片的放大縮小、縮略圖等功能。因為每列貨車的圖片較多，為了給用戶良好的瀏覽體驗，先通過生成縮略圖的方式給出一個全部圖片的整體展示，再對感興趣的圖片進行原圖的瀏覽。

2.2 在線圖像增強功能設計

2.2.1圖像增強算法選擇

通過對采集到的大量貨車圖像分析發現，由于天氣和光照原因導致圖像對比度很低，圖像的細節信息難以展現，圖像整體偏暗，直方圖相對集中，人眼很難對故障進行準確評判。為此需要選擇一種合適的圖像增強算法來對原始圖像進行增強，把可能的故障更清晰地呈現出來，以方便列檢員對貨車圖像進行準確的判斷。

直方圖均衡是空間域圖像增強的常用方法，常用的直方圖均衡算法主要有直方圖均衡化(Histogram Equalization, HE)算法、自適應直方圖均衡化(Adaptive Histogram Equalization, AHE)算法、對比度受限自適應直方圖均衡化(Contrast Limited Adaptive Histogram Equalization, CLAHE)算法3種。HE算法是根據累計分布函數對圖像中所有像素點采用同一個變換函數來進行全局的圖像增強，難以提高局部的對比度。AHE算法是利用從鄰域像素點計算出的變換函數來對每個像素點進行增強，很容易造成圖像失真、噪聲放大。CLAHE算法是一種局部直方圖均衡算法，將對比度受限和自適應直方圖均衡結合在一起[4]，可以對圖像進行有限對比度放大的同時解決噪聲被放大這一問題[5]，因此本文采用CLAHE算法來增強貨車圖像。這幾種算法對應的增強效果圖如圖3所示，對應的圖像清晰度、對比度、信息熵的定量測試結果如表1所示。

圖3 圖像增強算法效果對比

表1 圖3所示圖像清晰度、對比度、信息熵的定量結果

從效果圖和定量結果可以看出，采用CLAHE算法增強后的圖像中細節部位被有效地增強，清晰度、對比度有了很大提高，同時噪聲相比AHE算法有了很大的改善。

2.2.2前端繪圖技術——Canvas技術

Canvas作為HTML5中的一項關鍵技術，已經被目前所有主流的瀏覽器所支持[6]。顧名思義Canvas是定義在瀏覽器上的畫布，是一個標簽，但與傳統的p標簽、img標簽不同，它有著自己的一套Canvas API供使用者調用，所以它更是一種編程工具，是一套編程接口。Canvas的出現打破了瀏覽器基于文檔的設計初衷，使Web頁面展示的效果變得更加豐富，將網頁這一形態的應用程序推向了另一高度。

Canvas作為一個標簽元素，使用時與其他標簽一樣，需要先創建標簽，之后再通過getContext(‘2d’)函數獲取繪圖的上下文環境，這是進行真實繪制所需要的一個接口。其中getImageData()和putImageData()這兩個像素級操作函數為在線進行圖像增強提供了可能和思路。getImageData()方法可以返回圖像的RGBA值，并封裝到一個imageData數組里供使用者后續調用，這使得可以在前臺獲取圖像的像素點進行相應的操作；putImageData()方法可以將處理后的像素點重繪到畫布上，供瀏覽者觀看。Canvas前端圖像增強具體程序流程如圖4所示。

圖4 Canvas前端圖像增強流程圖

傳統技術通過分析中心進行后臺圖像增強，再反饋到前端瀏覽器進行展示，其間需要大量的處理時間和傳輸時間，而Canvas技術在不改變原圖的基礎上，直接在前臺對圖像增強、重繪，能實時地展現給用戶增強后的圖片。

3 系統實現

3.1 貨車信息瀏覽功能實現

系統實現了對貨車數據信息、圖片信息在線瀏覽的功能，將其直觀地為列檢員展現。在圖表展示方面，為了減少數據庫檢索的負擔，采用分頁查詢，每次只查詢當前頁需要展示條數的數據，翻頁時再發送請求去查詢下一頁的數據。雙擊每個條目，即可查詢相應日期的貨車圖片信息，如圖5所示。

圖5 在線瀏覽貨車數據、圖片信息

3.2 在線圖像增強功能實現

如果列檢員查看的原始問題圖片本身對比度不高，細節展現不明顯，可以采用圖像增強功能進行在線的圖像增強。系統對采集到的大量圖片進行了增強測試，增強效果明顯。圖6給出了一幅典型的貨車圖片進行說明，上圖為原始圖片，下圖為增強處理后在Canvas畫布上重繪的圖片，該圖所示的圖像清晰度、對比度、信息熵的定量結果如表2所示。

圖6 在線采用CLAHE算法對原始圖像增強

表2 圖6所示圖像清晰度、對比度、信息熵的定量結果

從圖6可以看出原本對比度很低的原始圖片經過CLAHE算法增強后，細節展現更突出；從表2圖像質量指標也可看出，在清晰度、對比度和信息熵方面處理后的結果圖較原圖片有明顯的提升。在線圖像增強功能為列檢員復檢圖片提供了很大的方便，提高了工作效率，降低了誤檢率。

3.3 人工復檢功能實現

為了保證檢修的正確率，防止可能由于天氣原因、設備故障燈等外部因素造成的誤判，系統實現了對貨車圖片的復檢功能，將問題圖片的相關信息，如貨車數據信息、故障圖片信息等，直觀地為列檢員展現。列檢員通過查看問題圖片，再次對問題圖片進行評判，最終確認是否有故障，如圖7所示。

圖7 人工復檢貨車故障圖片

3.4 訪問性能測試

在高并發的訪問環境下，本實驗使用Apache Jmeter軟件對系統進行壓力測試[7]，服務器處理器為Intel Core i7 CPU 860 @ 2.80 GHz，內存為4 GB DDR3，操作系統為Windows 7專業版。用戶模擬線程均在1 s內啟動，線程數為50，不斷對系統圖表頁面進行訪問測試，測試結果截圖如圖8所示。

圖8 系統壓力測試結果

從圖8可以看出總共發送了32 105個請求，平均每個請求的響應時間是1 s，錯誤率為1.56%，每秒可以處理最多492個請求，滿足在線瀏覽系統應有的需求。

4 結論

本文針對傳統的C/S架構下依賴于ActiveX控件的貨車圖像在線瀏覽系統中存在的問題以及新增的需求，采用輕量級的B/S架構，設計了一種基于HTML5 Canvas技術的在線圖像增強系統。該系統包含貨車數據、貨車圖片的在線瀏覽功能，在線圖像增強功能，列檢員復檢功能。無需安裝第三方插件，通過瀏覽器即可訪問本系統，并對當前主流的瀏覽器有著很好的兼容性。系統中采用增強效果更好的CLAHE算法，直接在瀏覽器端對采集到的圖片進行實時的在線圖像處理，供列檢員查看，在很大程度上節約了列檢員的工作時間，提高了對故障圖片評判的準確度，更進一步提升了工作效率，改善了用戶體驗。目前該系統已經在鐵路貨運行業中投入使用，可以高效穩定地運行，也得到列檢作業人員的肯定。