使用Socket的Websocket上的PNG或JPG（不是rgb），不带base64

Question

有没有一种方法可以将PNG图片呈现到画布上而不必将其编码为base64？

服务器以二进制形式发送PNG，客户端在ArrayBuffer中接收它并将其显示在画布上。 我可以使它起作用的唯一方法是在服务器端将数据编码为base64-因为我需要它要快。 在客户端，我使用data:image/png;base64标签创建了一个图像obj。

我知道您可以创建一个Blob和一个文件读取器，但是我无法正常工作。

这是Blob版本：

var blob  = new Blob([image.buffer],{type: "image/png"});
var imgReader = new FileReader();

imgReader.onload = function (e) {
  var img = new Image();
  img.onload = function (e) {
    console.log("PNG Loaded");
    ctx.drawImage(img, left, top);
    window.URL.revokeObjectURL(img.src);    
    img = null;  
  };

  img.onerror = img.onabort = function () {         
    img = null;
  };
  img.src = e.target.result;              
  imgReader = null;
}
imgReader.readAsDataURL(blob);  

图像是Uint8Array。 我从中创建一个斑点。 其余的不言而喻。

图片是正确且有效的PNG图片。 当我从服务器发送它时，我将它们写到服务器端的文件中，并使用图像查看器很好地呈现它们。

Answer 1

您可以使用createObjectURL创建blob URL，而无需执行任何base64编码，只需将创建的blob传递给它，您将拥有一个可以设置为img.src的URL。

  var blob  = new Blob([image],{type: "image/png"});
  var img = new Image();
  img.onload = function (e) {
    console.log("PNG Loaded");
    ctx.drawImage(img, left, top);
    window.URL.revokeObjectURL(img.src);    
    img = null;  
  };

  img.onerror = img.onabort = function () {         
    img = null;
  };
  img.src = window.URL.createObjectURL(blob); 

Answer 2

我只看到它以这种方式使用。 如果您不想通过网络发送base64，则可以使用btoa在客户端将二进制数据转换为base64。

查看MDN， drawImage带有一个CanvasImageSource对象。 CanvasImageSource表示HTMLImageElement ， ImageBitmap等类型的任何对象。

在进一步的搜索中，我发现了一些与ImageBitmap相关的信息，但还不足以提供解决方案。

我可以将其添加到注释中，但是，它将变成大量注释并失去所有清晰度。