当源是 base64 websocket 数据时，图像加载不触发 JavaScript

Question

我有一个自定义帮助台应用程序，我正在尝试在javascript中运行。该程序有一段在客户计算机上运行的代码，并将图像发送到Autobahn WebSocket服务器，该服务器充当图像查看器的代理，该查看器可以通过WebSocket发送回点击和击键。这目前都在 Python 中正常工作，但是，当我在 JavaScript 中尝试时，无论我做什么我都无法加载我的图像，我也无法弄清楚我做错了什么。

这是我的javascript中被破坏的部分：

function onMessage(evt) {
  if(evt.data.indexOf('[00000]')>=0){
    var ar = evt.data.split('[00000]');
    if (ar[0] == "[IMAGE]"){
      var imgdata = evt.data.split('[22222]');
      context.width = imgdata[0];
      context.height = imgdata[1];
      console.log(context.width + " " + context.height)
      try{
        var img = new Image();
        img.src = imgdata[2];
        context.drawImage(img,0,0);
        console.log("IMAGE");
      }catch(e){
        console.log(e)
      }
    }else if(ar[0] == "[RETCONN]"){
       console.log("Accepted!");
    }
  }
}

下面是来自服务器的一些代码，试图澄清javascript发生了什么。

def onMessage(self, payload, isBinary):
    if isBinary:
        print("Binary message received: {0} bytes".format(len(payload)))
    else:
        msg = payload.decode('utf8')
        com, data, arg = msg.split('[11111]')
        if com == ("[IMAGE]"):
            for name, conn in clients.items():
                if name == data:
                    conn.sendMessage(('[IMAGE]'+'[00000]'+arg).encode('utf8'))
                    break

这就是从客户端将图像组合在一起的方式：

data = image.tostring()
data = base64.b64encode(data)
self.sendMessage(('[IMAGE]' + '[11111]' + rid + '[11111]' + str(w) + '[22222]' + str(h) + '[22222]' + data).encode('utf8'))

任何人都知道我在javascript中做错了什么？

编辑：我知道img.src在错误的位置。 移动到正确的位置并不能解决问题

Answer 1

如果要使用 base64 编码的图像作为图像对象的源，则需要采用以下格式：

data:image/png;base64,<base64 encoded image>

您需要在 base64 字符串前面附加data:image/png;base64,

img.src = "data:image/png;base64,"+imgdata[2];

您也错误地解析了消息。
imgdata[0]应该是您的宽度，但它也包括[IMAGE][00000].
您可能想要ar[1].split('[22222]');而不是evt.data.split('[22222]');。

为了避免编码的复杂性，我建议您使用 JSON 对 WebSocket 消息进行编码。

编辑：

您得到的图像损坏，因为image.tostring()返回原始图像数据，但data:image/png;base64,它应该是 PNG 格式。

要获取 base64 编码的 PNG 数据，请使用以下命令：

import io
buffer = io.BytesIO()
image.save(buffer, "png")
data = base64.b64encode(buffer.getvalue())