在blob上设置内容类型

Question

我们将Blob(图像)传送到websocket并将其渲染到另一端的画布上.

当我使用createObjectURLblob时,我收到此警告:

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 instance(blob).你可以使用then 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.