在blob上设置内容类型

Question

We're transferring a Blob (image) down a websocket and rendering it to a canvas on the other end.

When I use createObjectURL with the blob, I get this warning:

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:

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:

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 Blob object with new Blob ?

Answer 1

Let's consider you have Blob instance ( blob ). You can use then slice method on it:

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

and that's it.

It just creates new blob with the same data, but with new type.

Answer 2

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 ).

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:

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?).

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.

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.

Answer 3

"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."

 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

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

Just throwing out some ideas.

Answer 4

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

Answer 5

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

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:

app.get('/image.gif', function(req, res) {
  res.set('Content-Type', 'image/gif');
  res.sendfile('./image.gif');
});