馬俊俊 王棟 徐建良

摘 要：針對用戶使用二維碼進行數(shù)據(jù)傳輸時數(shù)據(jù)量較大的問題，提出一套基于B/S架構的Web端數(shù)據(jù)交換解決方案。該方案依托圖像處理技術，瀏覽器端采用HTML5與JS技術，服務器端采用OpenCV與C++技術。測試及試運行結果表明，利用圖像處理技術保存和識別大數(shù)據(jù)量二維碼圖像的方案是可行的。該系統(tǒng)不僅可方便用戶在PC端和手機等移動端的日常使用，也為二維碼的數(shù)據(jù)傳輸提供了一種新方式。

關鍵詞：二維碼；數(shù)據(jù)傳輸；圖像處理；B/S架構

DOI：10.11907/rjdk.172733

中圖分類號：TP319

文獻標識碼：A 文章編號：1672-7800（2018）005-0151-03

Abstract：The solution was proposed based on the Web data terminal switch within the B/S framework to solve the problem of large data quantity in quick response （QR） code transmission. We adopted image processing technology in this solution， used HTML 5 and JS technology for the browzer and employed OpenCV and C++ for the server terminal. The experiment showed that it was a feasible solution to store and recognise large QR Code imags， and it also provided a new method for QR code transmission.

Key Words：QR code； data transmission； image processing； B/S architecture

0 引言

隨著科學技術的飛速發(fā)展，二維碼技術因具有信息容量大、糾錯能力強與編碼范圍廣等優(yōu)點在不同場合發(fā)揮著重要作用，比如信息獲取、手機支付、網(wǎng)站跳轉和防偽溯源等。現(xiàn)階段二維碼是國內外研究的熱點，但大多數(shù)為二維碼編解碼方式在不同場景的應用，也有對二維碼數(shù)據(jù)交換方式的研究，但還比較少且只是簡單應用，例如基于二維碼的醫(yī)療保健系統(tǒng)[1]，二維碼技術在數(shù)字圖書館或食品安全監(jiān)管中的應用[2-3]，企業(yè)利用二維碼對數(shù)據(jù)實現(xiàn)雙向傳遞的研究等[4]。這些研究雖然應用了二維碼，但未充分考慮用戶使用二維碼的便捷性與包含大數(shù)據(jù)量二維碼圖像的識別問題，還有很多值得深入研究的地方。

因此，本文提出一種以二維碼為介質，基于B/S架構的數(shù)據(jù)交換方式。HTML5可在各大主流瀏覽器上實現(xiàn)調用本地攝像頭拍照，利用強大的畫布功能進行圖像預覽，并與JS配合控制圖像分塊上傳。對于大數(shù)據(jù)量的二維碼圖像進行分塊拍攝，服務器端負責圖像預處理、拼接與解碼功能。該方式在PC端和手機等移動智能設備的瀏覽器上均可實現(xiàn)，也可應用于內外網(wǎng)物理隔離的信息化環(huán)境，既保證了數(shù)據(jù)交換的安全性，又方便了用戶使用，有較強的實際應用價值。

1 編碼設計與實現(xiàn)

基于B/S架構的Web端應用程序編碼大致過程為：用戶打開瀏覽器輸入要編碼的內容，瀏覽器將其發(fā)送給服務器，服務器端接收到數(shù)據(jù)后調用相應編碼程序，將信息編碼成二維碼，并將該圖像返回瀏覽器端實現(xiàn)渲染。該編碼方法比較常見，可供參考的例子很多，此處不再贅述。

2 解碼設計與實現(xiàn)

2.1 瀏覽器端設計與實現(xiàn)

在瀏覽器端，用戶調用本地攝像頭拍攝二維碼圖像，將該圖像通過AJAX向服務器端發(fā)送http請求，服務器端接收到二維碼圖像后，調用相應處理程序對二維碼圖像進行識別處理，并將解碼結果返回瀏覽器。前后端交互流程如圖1所示。

2.1.1 瀏覽器調用攝像頭

在HTML5出現(xiàn)之前，瀏覽器要獲取本地攝像頭只有通過第三方插件（ActiveX）或Flash獲取，微軟的Silvertlight中也可以獲取，但這些方式比較復雜。HTML5出現(xiàn)后，可兼容各大主流瀏覽器，只要配合JS即能簡單快速地獲取本地攝像頭，HTML5中的Canvas結合新增的標簽可以打開本地攝像頭并實現(xiàn)拍照和預覽功能，部分代碼如下：