Set content type to blob

Question

We wrap the Blob (image) down the websocket and pass it to the canvas on the other end.

When I use createObjectURL with 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 URL of the object using the following code. A BLOB is sent through 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 answer this warning is to create a copy of blob with the following code, but I do not want to enter the overhead of copying all the data:

 var blob = new Blob([e.data], { type: 'image/gif' }); 

The method is 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

At first, I would think if you say "mistake", you really mean "warning". They are really two different things, and the browser treats them differently (usually it only tracks / warns warnings when the developer tools are open, etc.).

So, first, I would question the assumption that this is even a problem (the overhead of the browser is "automatic typing" of blob compared to the overhead of the "newbie" on Blob, etc.).

But, nevertheless, the blob.type property is really useless in JavaScript, and so you should set it when blob is "newed". In your case, it sounds like you are receiving data from an Objective-C socket and simply connecting it with:

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

The native blob data from the Objective-C socket does not contain data of the type "header" type when it sends it, and it looks like your node does not touch blob at all (did you try decorating the new Blob in your node and then sending it over the socket, to see if it saves text?).

So what happens is that websocket only sends blob data as it is received, and when the receiving javascript receives it, it implicitly enters it with a new Blob right then and there, just with an empty type.

So essentially no, there seems to be no way around the new Blob construct if you really want to get rid of this warning. Even if you tried tricks, such as adding a type to blob data and then splicing them, etc., you still cannot get around the websocket receive code by implicitly typing it as a blob with an empty type.

Answer 2

Suppose you have an instance of Blob ( blob ). Then you can use the slice method:

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

what is it.

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

Answer 3

"Blob URLs only work with GET requests, and when one of them is successfully requested, the browser sends an HTTP status code of 200 OK, and also sends a Content-Type header that uses a property of type Blob."

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

Am I quite here?

I got it all from https://www.inkling.com/read/javascript-definitive-guide-david-flanagan-6th/chapter-22/blobs

HTML5 Rocks seems to be creating a new Blob with an answer to an XHR request. So maybe this is not so bad. http://www.html5rocks.com/en/tutorials/file/xhr2/#toc-response

Just throw out some ideas.

Answer 4

You should probably set your Content-Type on the server side before sending it

Answer 5

You can solve this problem from the moment you deliver the image. This problem is due to the wrong type of content, so you must configure the server to send images with image headers.

If it was in PHP, you should have something like

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

(Just giving you an idea)

In the case of Node.js, although I'm not an expert, you can set the content type for the response object, for example:

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