javascript - 在 blob 上设置内容类型

Question

我们正在将 Blob(图像)传输到 websocket 并将其渲染到另一端的 Canvas 上。

当我对 blob 使用 createObjectURL 时，我收到此警告:

Resource interpreted as Image but transferred with MIME type text/plain: "blob:https%3A//example.com/demo".

我们使用以下代码创建对象 URL。 blob 是通过客户端的 socket.binaryType = "blob"; 标准 websocket 发送的:

socket.onmessage = function(e) {
  var blob = e.data;
  var url = (window.URL || window.webkitURL).createObjectURL(blob);

  var image = document.createElement('img');
  image.src = url;
}

我能想到的解决此警告的唯一方法是使用以下代码创建 blob 的副本，但我不想引入复制所有数据的开销:

var blob = new Blob([e.data], {
  type: 'image/gif'
});

该方法每秒被调用数十次。

关于如何在不使用 new Blob 创建重复的 Blob 对象的情况下设置 blob 内容类型的任何想法？

Answer 1

假设您有 Blob实例(blob)。您可以在其上使用 slice 方法:

blob = blob.slice(0, blob.size, "image/jpeg")

就是这样。

它只是创建一个具有相同数据但具有新类型的新 blob。