通过WebSocket连接，实现Image从服务器到浏览器的传输
jopen
10年前
准备工作
创建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);