文档章节

通过WebSocket连接,实现Image从服务器到浏览器的传输

yushulx
 yushulx
发布于 2014/06/19 13:22
字数 466
阅读 4197
收藏 10

通过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);
 


本文转载自:http://www.codepool.biz/websocket-how-to

共有 人打赏支持
yushulx
粉丝 26
博文 92
码字总数 52955
作品 0
杭州
私信 提问
从HTML5 WebSocket到Socket.io

HTML5 WebSocket 作为新一代的web标准,HTML5为我们提供了很多有用的东西,比如canvas,本地存储(已经分离出去了),多媒体编程接口,当然还有我们的WebSocket。WebSocket是HTML5开始提供的...

Srtian
05/11
0
0
spring websocket 和socketjs实现单聊群聊,广播的消息推送详解

spring websocket 和socketjs实现单聊群聊,广播的消息推送详解 WebSocket简单介绍 随着互联网的发展,传统的HTTP协议已经很难满足Web应用日益复杂的需求了。近年来,随着HTML5的诞生,WebSo...

浅色夏墨
08/17
0
0
WebSocket 是什么原理?为什么可以实现持久连接?

作者:腾讯云技术社区 众所周知,Web应用的通信过程通常是客户端通过浏览器发出一个请求,服务器端接收请求后进行处理并返回结果给客户端,客户端浏览器将信息呈现。这种机制对于信息变化不是...

xiaogong1688
06/29
0
0
Spring实践--Websocket集成和XML配置

WebSocket 简介 WebSocket 是 HTML5 一种新的协议。它实现了浏览器与服务器全双工通信,能更好的节省服务器资源和带宽并达到实时通讯,它建立在 TCP 之上,同 HTTP 一样通过 TCP 来传输数据,...

spinachgit
05/03
0
0
WebSocket协议详解及应用

https://blog.csdn.net/u014520745/article/details/52639452 WebSocket协议详解及应用(一)-初识WebSocket 一、什么是WebSocket WebSocket是一个允许Web应用程序(通常指浏览器)与服务器进行双...

徐风来
10/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

图形用户界面和交互输入方法---图形数据的输入功能

图形数据的输入功能 输入模式 回显反馈

中国龙-扬科
8分钟前
0
0
互联网企业安全之端口监控

背景 外网端口监控系统是整个安全体系中非常重要的一环,它就像眼睛一样,时刻监控外网端口开放情况,并且在发现高危端口时能够及时提醒安全、运维人员做出相应处理。 对安全人员来说,互联网...

Skqing
10分钟前
0
0
JavaMonitor

常规监控jvm,都是比较麻烦的。但是今天在开源中国,看到了一个web版的javaMonitor。 虽然要在服务器上安装,但是这样的话,大家都能看见了。所以还是非常six的。 发现写了这个的博主也是非常...

miaojiangmin
14分钟前
0
0
Redis实践系列丨Codis数据迁移原理与优化

Codis介绍 Codis 是一种Redis集群的实现方案,与Redis社区的Redis cluster类似,基于slot的分片机制构建一个更大的Redis节点集群,对于连接到codis的Redis客户端来说, 除了部分不支持的命令外...

中间件小哥
14分钟前
0
0
HTTP常用状态码(14种)

类别 原因短语 1xx 信息型状态码 接收的请求正在处理 2xx 成功状态码 请求正常处理完毕 3xx 重定向状态码 需要进行附加操作以完成请求 4xx 客户端错误状态码 服务器无法处理请求 5xx 服务器错...

vio小黑
21分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部