使用ArrayBuffer通过websocket传输PNG或JPG（不是RGB），无需使用base64编码。

Question

有没有一种方法可以在不将PNG图像编码为base64的情况下将其渲染到画布上？

服务器以二进制形式发送PNG，客户端以ArrayBuffer形式接收并在画布上显示它。我能够让它工作的唯一方法是通过在服务器端将数据编码为base64 - 因为我需要它快速。在客户端，我创建了一个带有data:image/png;base64标签的图像对象。

我知道你可以创建一个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类型。我从它创建了一个Blob对象。剩下的内容很容易理解。

这些图像都是正确和有效的PNG格式。当我从服务器发送它们时，我在服务器端将它们写入文件，并且可以通过图像查看器正常渲染。

- Evren Bingøl

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); 

- Musa

---

谢谢，我尝试过类似的东西，但没有使用createObjectUrl。 - Evren Bingøl

Answer 2

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

查看MDN，drawImage需要一个CanvasImageSource对象。CanvasImageSource表示任何类型的HTMLImageElement、ImageBitmap和其他一些对象。

进一步搜索后，我找到了一些与ImageBitmap相关的信息，但是还不足以提供解决方案。

我本可以将此添加到评论中，但那样会变成一个庞大的评论，并失去所有的清晰度。

- andHapp