Javascript 带ArrayBuffer但不带base64的websocket上的PNG或JPG（非rgb）

有没有一种方法可以将PNG图像渲染到画布，而不必将其编码到base64

服务器以二进制形式发送PNG，客户端以ArrayBuffer形式接收 并将其显示在画布上。我能让它工作的唯一方法是在服务器端将数据编码到base64，因为我需要它的速度。在客户端，我用

data:image/png创建了一个图像obj；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图像。当我从服务器发送它时，我将它们写入服务器端的一个文件中，并使用图像查看器进行良好渲染

我只见过这种用法。如果不希望通过网络发送base64，则可以在客户端使用将二进制数据转换为base64

查看MDN，获取一个对象

CanvasImageSource

表示任何类型的对象

HTMLImageElement

，

ImageBitmap

和其他类型的对象

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

---

我本可以在评论中加上这个，但是，它会变成一个巨大的评论，并失去所有的清晰度

您可以使用

createObjectURL

创建blob url，而无需进行任何base64编码，只需将装箱的blob传递给它，就可以将url设置为img.src

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

---

谢谢，我尝试了类似的方法，但没有使用createObjectUrl。