Question

我正构建一个简单的WebSocket应用程序，将当前画布的二进制快照传输给其他侦听器。

使用WebSocket将当前画布快照发送为：

var image = context.getImageData(0, 0, canvas.width, canvas.height);
var buffer = new ArrayBuffer(image.data.length);
var bytes = new Uint8Array(buffer);
for (var i=0; i<bytes.length; i++) {
    bytes[i] = image.data[i];
}
websocket.send(buffer);

尝试将接收端的数据呈现为：

var bytes = new Uint8Array(blob.size);
var image = context.createImageData(canvas.width, canvas.height);
for (var i=0; i<image.length; i++) {
    image[i] = bytes[i];
}
context.drawImage(image, 0, 0);

正确接收斑点，但图像仍未渲染。

有什么想法吗？

Answer 1

在连接初始化之后立即设置WebSocket的binaryType属性。这可以这样做：

var wsUri = "ws://localhost:8080/whiteboard/websocket";
var websocket = new WebSocket(wsUri);
websocket.binaryType = "arraybuffer";

这将允许传输文本和二进制数据。

Answer 2

我猜你可能已经看过这个页面了。

http://www.adobe.com/devnet/html5/articles/real-time-data-exchange-in-html5-with-websockets.html

在该页面上找到“接收二进制邮件”，或者更好地阅读整页。

我认为最好将调试放在onmessage事件第1行并检查event.data对象。正如您所说，能够捕获二进制数据并将其发送到服务器，这可以避免您的浏览器可能无法通过Web套接字支持二进制数据。

现在我唯一的疑问是“服务器真的在发送二进制数据吗？” 你能尝试创建一个可见的img html元素并将收到的数据分配给src prop给那个元素来检查数据吗？不知道这是否有帮助 websocket for binary transfer of data & decode

Answer 3

http://www.w3schools.com/tags/canvas_createimagedata.asp?output=print

它应该是image.data []而不是图像[]

Answer 4

你的bytes变量似乎是空的您使用了http://www.javascripture.com/Uint8Array或https://developer.mozilla.org/en-US/docs/JavaScript_typed_arrays/Uint8Array中的第一种构造函数其中每个元素都归零。

Answer 5

您的最终代码应如下所示

var bytes = new Uint8Array(blob);
var image = context.createImageData(canvas.width, canvas.height);
for (var i=0; i<bytes.length; i++) {
    image.data[i] = bytes[i];
}
context.drawImage(image, 0, 0);

在WebSocket中接收Blob并在Canvas中呈现为图像

5 个答案: