Question

我们将一个Blob（图片）传送到websocket并将其渲染到另一端的画布上。

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

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

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

Answer 1

我们假设你有Blob个实例（blob）。您可以在其上使用slice方法：

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

就是这样。

它只是使用相同的数据创建新blob，但使用新类型。

Answer 2

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

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

但是，那就是说，blob.type属性在JavaScript中确实是不可变的，因此你必须在blob“newed”时设置它。在你的情况下，听起来你是从Objective-C套接字获取数据，只是通过菊花链接它：

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

来自Objective-C套接字的blob数据本身在发送它时不包含该类型的“标题”类型数据，并且听起来你的节点根本没有触及blob（你试过装饰它吗？您的节点中的新Blob，然后将其发送到套接字以查看它是否保留键入？）。

所以正在发生的事情是websocket正在发送blob数据，因为它得到它，当接收到的javascript获取它时，它隐含地用新的Blob键入它然后就在那里，只是一个空白类型。

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

Answer 3

“Blob URL仅适用于GET请求，当成功请求一个URL时，浏览器会发送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

只是抛出一些想法。

Answer 4

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

Answer 5

您可以从提供图像的最后解决此问题。由于内容类型错误，会出现此问题，因此您应将服务器配置为使用图像标头发送图像。

如果这是在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');
});

在blob上设置内容类型

5 个答案: