我在用 websockify 将图像从python服务器显示到HTML5画布。
我认为我已经设法成功从我的python服务器发送图像，但我无法将图像显示到我的画布。
我认为问题与我试图在画布上显示的字节数有关，我相信我不会等到收到整个图像然后将图像显示到画布上。
到现在为止我有：
关于消息功能。当我发送图像时，我得到12 MESSAGERECEIVED 在控制台
ws.on('message', function () {
//console.log("MESSAGERECEIVED!")
msg(ws.rQshiftStr());
});
我收到字符串的msg函数，我试图在画布上显示它。我为每张图片调用了12次方法。刺痛的形式是 'xÙõKþ°pãüCY ：
function msg(str) {
//console.log(str);
console.log("RELOAD");
var ctx = cv.getContext('2d');
var img = new Image();
//console.log(str);
img.src = "data:image/png;base64," + str;
img.onload = function () {
ctx.drawImage(img,0,0);
}
}
对于如何解决这个问题，有任何的建议吗？
websockify + websock.js的重点是透明地支持流式二进制数据（更多内容见下文）。从接收队列中获取的数据已经被base64解码。但是，数据URI方案需要base64编码的字符串，因此您需要将图像数据编码为base64。您可以使用内置的window.btoa（）对base64编码二进制编码的字符串：
img.src = "data:image/png;base64," + window.btoa(str);
或者，为了提高效率，您可以使用include / base64.js中的Base64模块，但是您需要传递一个像rQshiftBytes那样的字节数组：
msg(ws.rQshiftBytes());
img.src = "data:image/png;base64," + Base64.encode(data); // str -> data
关于在websockify中使用base64：
Websockify使用base64对数据进行编码，以支持不直接支持二进制数据的浏览器。除了像iOS Safari和桌面Safari这样流行的Hixie浏览器之外，一些浏览器版本在野外使用HyBi但缺少二进制支持。不幸的是，就Chrome而言，他们同时也有一个WebIDL错误，这会阻止在建立连接之前检测二进制支持。
另外，在Opera，firefox 3.6-5，IE 8和9上使用WebSockets的主要选项是 网络插座JS。 web-socket-js支持HyBi，但没有二进制支持，可能不会，因为它所针对的大多数旧版浏览器不支持本机二进制类型（Blob和Typed Arrays）。
支持HyBi和二进制数据的浏览器的市场份额目前相当低。但是，将来，Websockify将检测（通过对象检测或浏览器版本检测）浏览器是否支持二进制数据并直接使用该支持而无需base64编码/解码。
base64编码/解码的延迟（和CPU）开销非常低，并且无论如何通常会被网络延迟淘汰。 base64编码数据的带宽开销约为25％（即原始数据变大33％），但它确实在基本上所有浏览器上通过WebSockets提供二进制数据（使用web-socket-js polyfill / shim，它是如果需要，可以通过websockify透明地使用）。