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

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

正确接收 blob，但图像仍未呈现。

任何想法 ？

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 events 第一行并检查 event.data 对象。正如您所说，能够捕获二进制数据并将其发送到服务器，这消除了您的浏览器可能不支持 Web 套接字上的二进制数据的疑问。

现在我唯一的疑问是“服务器真的在发送二进制数据吗？” 您可以尝试创建一个可见的 img html 元素并将接收到的数据分配给 src prop 到该元素以检查数据吗？不知道这是否可以帮助 websocket 进行数据的二进制传输和解码

Answer 3

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

Answer 4

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

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

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