html5 websocket发送图片,通过WebSocket连接，实现Image从服务器到浏览器的传输

通过WebSocket链接，网页和服务端可以实现异步双向通讯。这里介绍如何从服务端获取一张图片，然后传输到网页中显示出来。

参考原文：

准备工作

创建WebSocket Server

创建一个WinForms工程，导入需要的reference。

添加namespace：

建立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();

}

获得实际数据的长度：

为了让数据能够在网页中正常显示，需要对数据进行处理。数据需要从尾到头读取，不然显示的数据是颠倒的。蓝色和红色的位置需要交换一下，不然颜色是错误的：

现在发送数据：

session.Send(imageData.Data, 0, imageData.Data.Length);

创建Web客户端

在Web端使用JavaScript创建WebSocket之后，需要设置属性：

ws.binaryType =

"arraybuffer"

;

收到ArrayBuffer之后，创建image元素，把图像画出来：