通過WebSocket連接，實現Image從服務器到瀏覽器的傳輸
準備工作
創建WebSocket Server
創建一個WinForms工程，導入需要的reference。
添加namespace：
using Dynamsoft.DotNet.TWAIN; using SuperSocket.SocketBase; using SuperWebSocket;
建立Server：
if (!appServer.Setup("192.168.8.84", 2012)) //Setup with listening port
{
MessageBox.Show("Failed to setup!");
return;
} 加載一張圖片：
bool isLoad = dynamicDotNetTwain.LoadImage("dynamsoft_logo_black.png"); // load an image
Image img = dynamicDotNetTwain.GetImage(0); 把數據轉換成bmp格式：
byte[] result;
using (System.IO.MemoryStream stream = new System.IO.MemoryStream())
{
img.Save(stream, System.Drawing.Imaging.ImageFormat.Bmp); // convert png to bmp
result = stream.GetBuffer();
} 獲得實際數據的長度：
int iRealLen = result.Length - 54; byte[] image = new byte[iRealLen];
為了讓數據能夠在網頁中正常顯示，需要對數據進行處理。數據需要從尾到頭讀取，不然顯示的數據是顛倒的。藍色和紅色的位置需要交換一下，不然顏色是錯誤的：
int iIndex = 0;
int iRowIndex = 0;
int iWidth = width * 4;
for (int i = height - 1; i >= 0; --i)
{
iRowIndex = i * iWidth;
for (int j = 0; j < iWidth; j += 4)
{
// RGB to BGR
image[iIndex++] = result[iRowIndex + j + 2 + 54]; // B
image[iIndex++] = result[iRowIndex + j + 1 + 54]; // G
image[iIndex++] = result[iRowIndex + j + 54]; // R
image[iIndex++] = result[iRowIndex + j + 3 + 54]; // A
}
}現在發送數據：
session.Send(imageData.Data, 0, imageData.Data.Length);
創建Web客戶端
在Web端使用JavaScript創建WebSocket之后，需要設置屬性：
ws.binaryType = "arraybuffer" ;
收到ArrayBuffer之后，創建image元素，把圖像畫出來：
var imageWidth = 73, imageHeight = 73; // hardcoded width & height.
var byteArray = new Uint8Array(data);
var canvas = document.createElement('canvas');
canvas.height = imageWidth;
canvas.width = imageHeight;
var ctx = canvas.getContext('2d');
var imageData = ctx.getImageData(0, 0, imageWidth, imageHeight); // total size: imageWidth * imageHeight * 4; color format BGRA
var dataLen = imageData.data.length;
for (var i = 0; i < dataLen; i++)
{
imageData.data[i] = byteArray[i];
}
ctx.putImageData(imageData, 0, 0);
// create a new element and add it to div
var image = document.createElement('img');
image.width = imageWidth;
image.height = imageHeight;
image.src = canvas.toDataURL();
var div = document.getElementById('img');
div.appendChild(image);
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！