Set content-type on 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 a new blob with the same data, but with the new type.