一種基于二維碼的大數據量傳輸方式

馬俊俊 王棟 徐建良

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

關鍵詞：二維碼；數據傳輸；圖像處理；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 引言

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

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

1 編碼設計與實現

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

2 解碼設計與實現

2.1 瀏覽器端設計與實現

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

2.1.1 瀏覽器調用攝像頭

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