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。我从中创建了一个blob。其余的是不言自明的。

图像是正确且有效的PNG图像。当我从服务器发送它时，我将它们写入服务器端的文件，并使用图像查看器进行渲染。

Answer 1

您可以使用createObjectURL创建一个blob网址，而无需执行任何base64编码，只需将您创建的blob传递给它，您将拥有一个可以设置为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);

Answer 2

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

查看MDN，drawImage获取CanvasImageSource个对象。 CanvasImageSource代表HTMLImageElement，ImageBitmap类型的任何对象。

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

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

PNG或JPG（不是rgb）over websocket与ArrayBuffer没有base64

2 个答案: