Question

我有一个自定义帮助台应用程序，我试图在javascript中运行。该程序有一个代码在客户的计算机上运行，并将图像发送到高速公路websocket服务器，该服务器充当图像查看器的代理，该图像查看器可以通过websockets发送点击和击键。这是目前正在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()会返回原始图片数据，但您收到的图片已损坏，但data:image/png;base64,预计会显示PNG格式。

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

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

当源是base64 websocket data

1 个答案: