結合WebSocket，實現遠程二維碼生成應用

在上一篇文章中介紹了經過WebSocket實現服務端和客戶端的圖像傳輸。基於這個實現，能夠把二維碼生成器放在服務端，輕鬆實現遠程解決方案。

參考原文：

Barcode Generator with HTML5 WebSocket

準備工做

• 下載Barcode SDK for .NET

• 閱讀 - 經過WebSocket鏈接，實現Image從服務器到瀏覽器的傳輸

二維碼遠程生成

在工程中添加DynamicBarcode.dll,在屬性中設置Copy to Output Directory爲Copy always，這樣dll就會和exe文件在同一個目錄下。

添加一張背景圖。對收到的消息編碼。經過一個接口，生成二維碼，並把二維碼畫到背景圖上。

float scale = 3;
short sImageIndex = 0;
dynamicDotNetTwain.MaxImagesInBuffer = 1;
bool isLoaded = dynamicDotNetTwain.LoadImage("test.png");
dynamicDotNetTwain.AddBarcode(sImageIndex, Dynamsoft.DotNet.TWAIN.Enums.Barcode.BarcodeFormat.QR_CODE, message, "", 0, 0, scale);

 

如今把二維碼發送到客戶端。發送兩次消息，第一次爲寬高信息，第二次爲圖像數據。基於以前的JavaScript代碼，簡單修改一下。

ws.onmessage = function (evt) {
     var data = evt.data;
     if (!data)
         return;
 
     if (data instanceof ArrayBuffer) {
         drawImage(evt.data);
     }
     else {
         var len = data.length;
         var index = data.indexOf(",");
         var w = data.substring(0, index);
         var h = data.substring(index + 1, len);
         imageWidth = parseInt(w);
         imageHeight = parseInt(h);
     }
 };

 

如今二維碼就能夠在網頁中顯示出來了。