30

我们正在将Blob（图像）传输到 websocket 并将其渲染到另一端的画布上。

当我createObjectURL与 blob 一起使用时，我收到以下警告：

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

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

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

4

5 回答 5

54

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

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

就是这样。

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

于 2018-06-15T12:27:00.593 回答
6

首先，我想知道当您说“错误”时，您是否实际上是指“警告”。它们实际上是两种不同的东西，浏览器对它们的处理方式也不同（它通常只在开发人员工具打开时跟踪/发出警告等）。

因此，首先我要挑战这样一个前提，即这甚至是一个问题（浏览器“自动键入”blob 的开销与“更新”一个 Blob 等的开销）。

但是，也就是说， blob.type 属性在 JavaScript 中确实是不可变的，因此您必须在 blob 为“新”时设置它。在您的情况下，听起来您正在从 Objective-C 套接字获取数据，并通过以下方式将其以菊花链形式连接起来：

ws.send(fromObjectiveCSocket, {binary: true, mask: true});

来自 Objective-C 套接字的 blob 数据本身在发送时不包含该类型的“标头”类型数据，听起来您的节点根本没有接触 blob（您是否尝试过在您的节点，然后将其发送到套接字以查看它是否保留输入？）。

所以正在发生的事情是，websocket 只在收到 blob 数据时发送它，当接收到的 javascript 收到它时，它会立即使用新的 Blob 隐式键入它，只是使用空白类型。

所以基本上没有，如果你真的想摆脱这个警告，似乎没有任何办法绕过新的 Blob 构造。即使您尝试了将类型添加到 blob 数据然后将其拼接等技巧，您仍然无法绕过 websocket 接收代码，将其隐式键入为具有空白类型的 blob。

于 2013-09-30T23:36:06.190 回答
0

您可能应该在发送之前在服务器端设置 Content-Type

于 2013-09-29T01:28:53.483 回答
0

“Blob URL 仅适用于 GET 请求，当请求成功时，浏览器会发送 HTTP 200 OK 状态代码，还会发送使用 Blob 类型属性的 Content-Type 标头。”

 var bb = new BlobBuilder();
 var blob = bb.getBlob("x-optional/mime-type-here");

 //send via websocket
 //load via websocket

我完全离开这里了吗？

我从https://www.inkling.com/read/javascript-definitive-guide-david-flanagan-6th/chapter-22/blobs获得了所有这些

HTML5 Rocks 似乎正在使用来自 XHR 请求的响应创建一个新的 Blob。所以也许它毕竟不是那么糟糕。http://www.html5rocks.com/en/tutorials/file/xhr2/#toc-response

只是抛出一些想法。

于 2013-09-29T01:55:46.537 回答
-1

您可以从交付图像的最后开始解决此问题。这个问题是由于错误的内容类型而发生的，所以您应该配置您的服务器以发送带有图像标题的图像。

如果这是在 PHP 中，你应该有类似的东西

header("Content-Type: image/jpeg");
echo $image_blob;
exit;

（只是给你一个想法）

对于 Node.js，虽然我不是专家，但您可以在响应对象上设置内容类型，例如：

app.get('/image.gif', function(req, res) {
  res.set('Content-Type', 'image/gif');
  res.sendfile('./image.gif');
});
于 2013-09-29T01:46:21.393 回答