September 29, 2013

Set content-type on blob

Chris Nolet’s 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 error:

Resource interpreted as Image but transferred with MIME type text/plain: "blob:https%3A//staging.app.io/23f53ce3-5a52-4e12-8686-190eb15a9ede".

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 error 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?

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');
});

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!