基于Canvas的貨車圖像瀏覽及增強(qiáng)系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)*

高斯文，卿粼波，熊淑華，張余強(qiáng)

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

0 引言

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

本文針對(duì)現(xiàn)有貨車圖像在線瀏覽系統(tǒng)的特點(diǎn)及不足，設(shè)計(jì)了一種B/S架構(gòu)下基于HTML5 Canvas技術(shù)的貨車圖像在線瀏覽及增強(qiáng)系統(tǒng)，為列檢作業(yè)人員節(jié)約了檢測(cè)時(shí)間、降低了誤檢概率，保證了鐵路運(yùn)營(yíng)高效、安全地運(yùn)行，具有重要的實(shí)際應(yīng)用價(jià)值。

1 需求分析及方案設(shè)計(jì)

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

考慮到免插件安裝及穩(wěn)定性，本系統(tǒng)采用B/S的架構(gòu)?；诖思軜?gòu)下的貨車圖像在線瀏覽系統(tǒng)，除了要實(shí)現(xiàn)基本的貨車數(shù)據(jù)查詢及圖像瀏覽功能外，還需要具備更好的交互性和可擴(kuò)展性，能夠?qū)崿F(xiàn)對(duì)對(duì)比度較低圖片的在線圖像增強(qiáng)功能和對(duì)問題圖片的人工復(fù)檢功能。

考慮到傳統(tǒng)的貨車圖像在線瀏覽系統(tǒng)應(yīng)有的基本功能[2]以及目前新增的需求，本文設(shè)計(jì)的系統(tǒng)包含貨車數(shù)據(jù)瀏覽、貨車圖像瀏覽、在線圖像增強(qiáng)、列檢員復(fù)檢4個(gè)模塊，其組成結(jié)構(gòu)如圖1所示。

圖1 系統(tǒng)組成結(jié)構(gòu)

其中貨車數(shù)據(jù)瀏覽模塊實(shí)現(xiàn)對(duì)過往貨車日期、時(shí)間、車號(hào)、方向、總輛數(shù)、行車方向、平均速度等數(shù)據(jù)的展示；貨車圖像瀏覽模塊實(shí)現(xiàn)對(duì)原始車輛圖像的展示；在線圖像增強(qiáng)模塊實(shí)現(xiàn)對(duì)對(duì)比度較低的圖像進(jìn)行實(shí)時(shí)的在線增強(qiáng)；列檢員復(fù)檢模塊實(shí)現(xiàn)對(duì)故障圖像的人工確認(rèn)檢查。

2 系統(tǒng)設(shè)計(jì)

2.1 貨車信息瀏覽功能設(shè)計(jì)

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

系統(tǒng)在前端JSP頁(yè)面中完成對(duì)jqGrid框架的基本配置，并通過異步請(qǐng)求的方式獲取表格的數(shù)據(jù)。請(qǐng)求過程中將當(dāng)前的頁(yè)碼、每頁(yè)顯示的數(shù)據(jù)條數(shù)等必要參數(shù)傳遞給后臺(tái)，以實(shí)現(xiàn)分頁(yè)查詢，減緩數(shù)據(jù)庫(kù)的壓力，后端通過處理請(qǐng)求信息在數(shù)據(jù)庫(kù)中檢索數(shù)據(jù)，返回JSON字符串，最后前端將返回的字符串綁定到表格節(jié)點(diǎn)上，完成信息的渲染展示。系統(tǒng)工作流程如圖2所示。

圖2 系統(tǒng)工作流程圖

除了文本信息以外，每列貨車還伴隨著大量的圖片信息需要進(jìn)行展示。圖片展示采用Viewer.js這款強(qiáng)大的圖片查看器，它支持響應(yīng)式的布局、圖片的放大縮小、縮略圖等功能。因?yàn)槊苛胸涇嚨膱D片較多，為了給用戶良好的瀏覽體驗(yàn)，先通過生成縮略圖的方式給出一個(gè)全部圖片的整體展示，再對(duì)感興趣的圖片進(jìn)行原圖的瀏覽。

2.2 在線圖像增強(qiáng)功能設(shè)計(jì)

2.2.1圖像增強(qiáng)算法選擇

通過對(duì)采集到的大量貨車圖像分析發(fā)現(xiàn)，由于天氣和光照原因?qū)е聢D像對(duì)比度很低，圖像的細(xì)節(jié)信息難以展現(xiàn)，圖像整體偏暗，直方圖相對(duì)集中，人眼很難對(duì)故障進(jìn)行準(zhǔn)確評(píng)判。為此需要選擇一種合適的圖像增強(qiáng)算法來(lái)對(duì)原始圖像進(jìn)行增強(qiáng)，把可能的故障更清晰地呈現(xiàn)出來(lái)，以方便列檢員對(duì)貨車圖像進(jìn)行準(zhǔn)確的判斷。

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

圖3 圖像增強(qiáng)算法效果對(duì)比

表1 圖3所示圖像清晰度、對(duì)比度、信息熵的定量結(jié)果

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

2.2.2前端繪圖技術(shù)——Canvas技術(shù)

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

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

圖4 Canvas前端圖像增強(qiáng)流程圖

傳統(tǒng)技術(shù)通過分析中心進(jìn)行后臺(tái)圖像增強(qiáng)，再反饋到前端瀏覽器進(jìn)行展示，其間需要大量的處理時(shí)間和傳輸時(shí)間，而Canvas技術(shù)在不改變?cè)瓐D的基礎(chǔ)上，直接在前臺(tái)對(duì)圖像增強(qiáng)、重繪，能實(shí)時(shí)地展現(xiàn)給用戶增強(qiáng)后的圖片。

3 系統(tǒng)實(shí)現(xiàn)

3.1 貨車信息瀏覽功能實(shí)現(xiàn)

系統(tǒng)實(shí)現(xiàn)了對(duì)貨車數(shù)據(jù)信息、圖片信息在線瀏覽的功能，將其直觀地為列檢員展現(xiàn)。在圖表展示方面，為了減少數(shù)據(jù)庫(kù)檢索的負(fù)擔(dān)，采用分頁(yè)查詢，每次只查詢當(dāng)前頁(yè)需要展示條數(shù)的數(shù)據(jù)，翻頁(yè)時(shí)再發(fā)送請(qǐng)求去查詢下一頁(yè)的數(shù)據(jù)。雙擊每個(gè)條目，即可查詢相應(yīng)日期的貨車圖片信息，如圖5所示。

圖5 在線瀏覽貨車數(shù)據(jù)、圖片信息

3.2 在線圖像增強(qiáng)功能實(shí)現(xiàn)

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

圖6 在線采用CLAHE算法對(duì)原始圖像增強(qiáng)

表2 圖6所示圖像清晰度、對(duì)比度、信息熵的定量結(jié)果

從圖6可以看出原本對(duì)比度很低的原始圖片經(jīng)過CLAHE算法增強(qiáng)后，細(xì)節(jié)展現(xiàn)更突出；從表2圖像質(zhì)量指標(biāo)也可看出，在清晰度、對(duì)比度和信息熵方面處理后的結(jié)果圖較原圖片有明顯的提升。在線圖像增強(qiáng)功能為列檢員復(fù)檢圖片提供了很大的方便，提高了工作效率，降低了誤檢率。

3.3 人工復(fù)檢功能實(shí)現(xiàn)

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

圖7 人工復(fù)檢貨車故障圖片

3.4 訪問性能測(cè)試

在高并發(fā)的訪問環(huán)境下，本實(shí)驗(yàn)使用Apache Jmeter軟件對(duì)系統(tǒng)進(jìn)行壓力測(cè)試[7]，服務(wù)器處理器為Intel Core i7 CPU 860 @ 2.80 GHz，內(nèi)存為4 GB DDR3，操作系統(tǒng)為Windows 7專業(yè)版。用戶模擬線程均在1 s內(nèi)啟動(dòng)，線程數(shù)為50，不斷對(duì)系統(tǒng)圖表頁(yè)面進(jìn)行訪問測(cè)試，測(cè)試結(jié)果截圖如圖8所示。

圖8 系統(tǒng)壓力測(cè)試結(jié)果

從圖8可以看出總共發(fā)送了32 105個(gè)請(qǐng)求，平均每個(gè)請(qǐng)求的響應(yīng)時(shí)間是1 s，錯(cuò)誤率為1.56%，每秒可以處理最多492個(gè)請(qǐng)求，滿足在線瀏覽系統(tǒng)應(yīng)有的需求。

4 結(jié)論

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