通过WebSocket连接,实现Image从服务器到浏览器的传输
博客专区 > yushulx 的博客 > 博客详情
通过WebSocket连接,实现Image从服务器到浏览器的传输
yushulx 发表于3年前
通过WebSocket连接,实现Image从服务器到浏览器的传输
  • 发表于 3年前
  • 阅读 4059
  • 收藏 10
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

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

参考原文:

Image Transmission between a HTML5 WebSocket Server and a Web Client

准备工作

创建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);
 


共有 人打赏支持
粉丝 24
博文 84
码字总数 35469
×
yushulx
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: