文档章节

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

yushulx
 yushulx
发布于 2014/06/19 13:22
字数 466
阅读 4253
收藏 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
粉丝 25
博文 95
码字总数 54680
作品 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
应用 HTML5 的 WebSocket 实现 BiDirection 数据交换

HTML5 是新一代的 Web 标准。虽然 HTML5 标准还没有最终确定但是它已然成为主流,各大厂商都开始提前实现其草案中的功能。HTML5 提供了很多新特征,比如 Canvas、离线存储、多线程、视频标签...

IBMdW
2012/01/04
2.6K
6
使用 HTML5 WebSocket 构建实时 Web 应用

作为下一代的 Web 标准,HTML5 拥有许多引人注目的新特性,如 Canvas、本地存储、多媒体编程接口、WebSocket 等等。这其中有“Web 的 TCP ”之称的 WebSocket 格外吸引开发人员的注意。WebSo...

lyg945
2014/08/27
1K
3
常见的Web实时消息交互方式和SignalR

原文:常见的Web实时消息交互方式和SignalR 标签: WebSocket SignalR 前言 1. Web消息交互技术 1.1 常见技术 1.2 WebSocket介绍 1.3 WebSocket示例 2. Signal 2.1 SignalR是什么 2.2 默认传输...

杰克.陈
2018/06/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

TiDB 源码阅读系列文章(二十四)TiDB Binlog 源码解析

作者:姚维 TiDB Binlog Overview 这篇文章不是讲 TiDB Binlog 组件的源码,而是讲 TiDB 在执行 DML/DDL 语句过程中,如何将 Binlog 数据 发送给 TiDB Binlog 集群的 Pump 组件。目前 TiDB 在...

TiDB
19分钟前
0
0
Oracle第三方工具PLSQL注册码

注册码: Product Code:4t46t6vydkvsxekkvf3fjnpzy5wbuhphqz serial Number:601769 password:xs374ca 这个注册码是PLSQL 11版本通用的,刚刚在官网下载了最新版11.0.6版,用 此激活码成功...

小橙子的曼曼
21分钟前
0
0
深度学习为图片人物换装【python代码教程】

在观看本文之前,请答应我要善良。昨天预告了下,发现很多同学对这个模型都表示出兴趣,甚至有好多同学后台发来照片让我帮他们脱裤子。授人以鱼不如授人以渔,请这些同学好自为之~ 01效果演示...

阿里云官方博客
41分钟前
5
0
centos7安装RabbitMQ详细过程

由于RabbitMQ是基于Erlang语言开发,所以在安装RabbitMQ之前,需要先安装Erlang 1、环境: centos 7.1 内核版本3.10.0-229.el7.x86_64 Erlang 19.0.4版本 RabbitMQ 3.6.14版本 2、在线安装E...

秋至丶枫以落
今天
1
0
6个使用KeePassX保护密码的技巧

虽然安全是个深奥的主题,但是你可以遵循几个简单的日常习惯来减小攻击面。本文将解释确保密码信息安全的重要性,并给出如何充分利用KeePassX的建议。 日益互联的数字世界使安全成为一个重要...

Linux就该这么学
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部