javascript 在 blob 上设置内容类型
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18998543/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set content-type on blob
提问by Chris Nolet
We're transferring a Blob(image) down a websocket and rendering it to a canvas on the other end.
我们将一个Blob（图像）向下传输到websocket 并将其渲染到另一端的画布上。
When I use createObjectURLwith the blob, I get this warning:
当我createObjectURL与 blob 一起使用时，我收到此警告：
Resource interpreted as Image but transferred with MIME type text/plain: "blob:https%3A//example.com/demo".
We create the object URL using the following code. The blob is send via a standard websocket with socket.binaryType = "blob";on the client side:
我们使用以下代码创建对象 URL。blob 通过标准的 websocketsocket.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;
}
The only way I can think to address this warning is to create a copy of the blob with the following code, but I don't want to introduce the overhead of copying all the data:
我能想到的解决此警告的唯一方法是使用以下代码创建 blob 的副本，但我不想引入复制所有数据的开销：
var blob = new Blob([e.data], {
type: 'image/gif'
});
The method gets called dozens of times per second.
该方法每秒被调用数十次。
Any ideas on how to set the blob content-type without creating a duplicate Blobobject with new Blob?
关于如何设置 blob 内容类型而不用创建重复Blob对象的任何想法new Blob？
采纳答案by Nick Sharp
First I would wonder if when you say "error" you actually mean "warning". They are really two different things and the browser treats them differently (it usually only tracks/raises warnings when the developer tools are open etc).
首先，我想知道当你说“错误”时，你的意思是否真的是“警告”。它们实际上是两种不同的东西，浏览器以不同的方式对待它们（它通常只在开发人员工具打开时跟踪/引发警告等）。
So first I would challenge the premise that this is even an issue ( the overhead of the browser "auto-typing" the blob versus the overhead of "newing" up a Blob etc ).
因此，首先我要挑战这样一个前提，即这甚至是一个问题（浏览器“自动输入”blob 的开销与“新建”一个 Blob 等的开销）。
But, that said, the blob.type property is indeed inmutable in JavaScript and as such you have to set it when the blob is "newed". In your case it sounds like you are getting the data from a Objective-C socket and just daisy chaining it down via:
但是，也就是说， blob.type 属性在 JavaScript 中确实是不可变的，因此您必须在“更新”blob 时设置它。在您的情况下，听起来您是从 Objective-C 套接字获取数据，然后通过以下方式将其菊花链：
ws.send(fromObjectiveCSocket, {binary: true, mask: true});
The blob data itself from the Objective-C socket is not containing the "header" type data of the type when it sends it across, and it sounds like your node is not touching the blob at all (have you tried decorating the new Blob in your node and then sending that down the socket to see if it retains the typing?).
来自 Objective-C 套接字的 blob 数据本身在发送时不包含该类型的“标头”类型数据，听起来您的节点根本没有接触 blob（您是否尝试在您的节点，然后将其发送到套接字以查看它是否保留输入？）。
So what is happening is that the websocket is sending down just the blob data as it got it and when the receiving javascript gets it, it is implicitly typing it with a new Blob right then and there, just with a blank type.
所以正在发生的事情是，websocket 只发送它得到的 blob 数据，当接收到的 javascript 得到它时，它会隐式地输入一个新的 Blob 就在那里，只是一个空白类型。
So essentially no, there does not seem to be any way around the new Blob construction if you really want to get rid of this warning. Even if you tried tricks like adding the type into the blob data and then splicing it out etc, you still can't get around the websocket receiving code implicitly typing it as a blob with a blank type.
所以基本上不，如果你真的想摆脱这个警告，似乎没有任何方法可以绕过新的 Blob 结构。即使您尝试了将类型添加到 blob 数据中然后将其拼接出来等技巧，您仍然无法绕过 websocket 接收代码将其隐式键入为具有空白类型的 blob。
回答by turkus
回答by Sheng Slogar
"Blob URLs only work with GET requests, and when one is successfully requested, the browser sends an HTTP 200 OK status code and also sends a Content-Type header that uses the type property of the Blob."
“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
Am I completely off here?
我完全不在这儿吗？
I've gotten all of this from https://www.inkling.com/read/javascript-definitive-guide-david-flanagan-6th/chapter-22/blobs
我从https://www.inkling.com/read/javascript-definitive-guide-david-flanagan-6th/chapter-22/blobs得到了所有这些
HTML5 Rocks seems to be making a new Blob with the response from the XHR request. So maybe it isn't so bad after all. http://www.html5rocks.com/en/tutorials/file/xhr2/#toc-response
HTML5 Rocks 似乎正在根据 XHR 请求的响应创建一个新的 Blob。所以也许它毕竟不是那么糟糕。http://www.html5rocks.com/en/tutorials/file/xhr2/#toc-response
Just throwing out some ideas.
只是抛出一些想法。
回答by Adassko
You probably should set your Content-Type on the server side before sending it
您可能应该在发送之前在服务器端设置您的 Content-Type
回答by Starx
You can solve this problem from the end you are delivering the image. This problem is happening because of the wrong content-type, so you should configure your server to send image with image headers.
您可以从交付图像的最后开始解决此问题。这个问题是由于错误的内容类型而发生的，所以你应该配置你的服务器来发送带有图像标题的图像。
If this was in PHP, you should have something like
如果这是在 PHP 中，你应该有类似的东西
header("Content-Type: image/jpeg");
echo $image_blob;
exit;
(Just giving you an idea)
（只是给你一个想法）
In case of Node.js, though I am not an expert you can set the content type on the response object like:
对于 Node.js，虽然我不是专家，但您可以在响应对象上设置内容类型，例如：
app.get('/image.gif', function(req, res) {
res.set('Content-Type', 'image/gif');
res.sendfile('./image.gif');
});
