设置 blob 的内容类型

我们正在转移一个Blob（图片）下载一个 websocket 并将其渲染到另一端的画布上。

当我使用createObjectURL对于斑点，我收到以下警告：

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

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

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

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

有关如何设置 blob 内容类型而不创建重复项的任何想法Blob对象与new Blob?

让我们考虑一下你有Blob https://developer.mozilla.org/en-US/docs/Web/API/Blob实例 （blob）。然后你就可以使用slice其方法：

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

就是这样。

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