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

Question

我有一个自定义帮助台应用程序，我正在尝试运行 javascript。该程序有一段代码运行在客户的计算机上，并将图像发送到高速公路网络套接字服务器，该服务器充当图像查看器的代理，图像查看器可以通过网络套接字发送回点击和击键。这一切目前都在 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>

您需要将 data:image/png;base64, 添加到您的 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() returns 原始图像数据，您得到的图像已损坏，但是 data:image/png;base64, 它应该是 PNG 格式。

要获取 base64 编码的 PNG 数据，请使用：

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

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

image onload not firing javascript when source is base64 websocket data

javascript

python

base64

canvas

websocket