文档章节

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

yushulx
 yushulx
发布于 2014/06/19 13:22
字数 466
阅读 1W
收藏 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
粉丝 30
博文 122
码字总数 70090
作品 0
杭州
私信 提问
加载中

评论(0)

从HTML5 WebSocket到Socket.io

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

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

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

浅色夏墨
2018/08/17
0
0
Python 如何爬取实时变化的 WebSocket 数据

作为一名爬虫工程师,在工作中常常会遇到爬取实时数据的需求,比如体育赛事实时数据、股市实时数据或币圈实时变化的数据。如下图: Web 领域中,用于实现数据'实时'更新的手段有轮询和 WebS...

急速奔跑中的蜗牛
2019/05/29
0
0
webSocket协议与Socket的区别

WebSocket介绍与原理 WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。一开始的握手需要借助HTTP请求完成。 ——百度百科 目的:即时通讯,替代轮...

osc_pb5yyzq7
2019/02/11
16
0
谈下WebSocket介绍,与Socket的区别

这个话题应该是面试中出现频率比较高的吧....不管咋样还是有必要深入了解下两者之间的关联。废话不多说,直接入题吧: WebSocket介绍与原理 目的:即时通讯,替代轮询 网站上的即时通讯是很常...

osc_lmyqaa32
2018/06/07
7
0

没有更多内容

加载失败,请刷新页面

加载更多

如何限制利用spring boot 框架自动限制上传文件

spring:   application:     name: appname   servlet:     multipart:       enabled: true       max-file-size: 512MB       max-request-size: 512MB @Ex...

osc_31d5oo2i
10分钟前
9
0
NATAPP1分钟快速新手图文教程(远程办公程序员联调神器)

NATAPP官方地址:https://natapp.cn/ 应用场景:前后端异地联调、系统演示、远程临时访问 首先在本站注册账号 点击注册 登录后,点击左边 购买隧道,免费/付费均可 根据需要选择隧道协议,这里以...

明德先生
12分钟前
6
0
李子柒的视频为什么这么吸引人?对她在B站上发布的视频进行分析

前言 本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。 作者:CDA数据分析师 加企鹅群695185429即可免费获取,资料全...

osc_tc2z9lbh
12分钟前
9
0
MySQL如何有效的存储IP地址

前几天,阿淼的一个朋友去面试,他回来告诉我,面试官问他 IP 地址是怎么存在数据库的?他当时也没多想,直接就回答的存字符串啊(心想:这么简单的问题,怕不是看不起我吧) 前面这段权当看...

osc_q5m9dzk0
13分钟前
18
0
一口气说出8种幂等性解决重复提交的方案,面试官懵了!

1.什么是幂等 在我们编程中常见幂等 1)select查询天然幂等 2)delete删除也是幂等,删除同一个多次效果一样 3)update直接更新某个值的,幂等 4)update更新累加操作的,非幂等 5)insert非幂等操作...

osc_kd8rd7b3
15分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部